Welcome to pushIn-js Discussions!

[nateplusplus]

👋 Welcome!

We're using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you're working on!

[nateplusplus]

To kick this off, I'm Nathan Blair, creator of PushIn.js. I am currently a web developer on the marketing team at Indeed. On my spare time I love watercolor painting, and I am a husband, dog and cat dad 😼

This plugin was the first thing I built as a beginner coder, and it has seen many changes and improvements over the years! I am thrilled to see that it has been useful for other developers out there, and would love to hear about what it's being used to create. 🙌

[Bromulus]

Hey Nate quick question.

Got everything to work fine except I was wondering, is there a way to have the in/out points, the screen position, based on a container or a div element rather than the very top of the page/browser?

Your "target" documentation doesn't seem to be doing the trick for me.

Basically I want to be able to scroll down a website page like normal, and then all of a sudden when it hits a full page width div element (like a bootstrap row lets say) the animation triggers and works its way through from there, when the animation completes the regular page starts scrolling again.

IOW I'd like to be able to have data-pushin-from="350" be 350 pixels down my div (that may be thousands of pixels down my page) instead of 350 pixels from the very top of the entire page.

Again I "almost" have this working, but the animation is starting at the top of the webpage (invisibly behind my regular website page elements) and then by the time I get to the designated element for the animation (div class="pushin) half the animation is already over (because it was happening behind the scenes as the user was scrolling down the webpage, prior to reaching the desired section.

Any help appreciated.

(Just a regular normal webpage html/css and linking to your hosted unpkg scripts)

[nateplusplus]

Hi Bromulus,

I'd be happy to help out! I know the documentation is still rough around the edges. Definitely would love any feedback you have to improve.

I have a few thoughts for you:

It sounds like what you're trying to do is very similar to the About page in the documentation site: https://pushinjs.com/ The user can scroll down the page, the animation starts but is contained within a section, and once the user scroll far enough, the page continues to scroll past the animation. I can walk you through how this is done if that is what you're after.

Based on your description, since you want animation to be contained to one area of the page, I would recommend setting your div as the target. This will ensure that once the user scrolls past the div, the animation will scroll off screen instead of having it fixed on screen at all times.

What may have not have been clear in the target documentation is the option to set the scrollTarget in combination with target. When you set a target, PushIn will automatically set the scrollTarget to whatever element you've pointed to. This tells PushIn to only listen to scroll events within that target element, which does not sound ideal for your situation. Instead, you can override that by setting scrollTarget to 'window'. I haven't added any great documentation on this yet, but you can read about it a little on the API page: https://pushinjs.com/api

With those two elements in place, you will still have the challenge of setting the in/out. Unfortunately since it sounds like you need to be listening to window for scroll events, you'll need to base that number on the full page rather than your div. However you might be able to dynamically retrieve that value from your div so that you don't need to manually calculate it?

For example:

const div = document.querySelector('#my-target');
const divTop = div.getBoundingClientRect().top + document.documentElement.scrollTop;

const config = {
  target: div,
  scrollTarget: 'window',
  scene: {
    inpoints: [ divTop ]
    //...
  },
  //...
};

const container = document.querySelector('.pushin');
new PushIn(container, config).start();

[nateplusplus]

@Bromulus I just noticed your comment about linking to the unpkg scripts and wanted to note that you can do the same thing I mentioned in my example while using the global function too. The difference being that you would just pass the config into the pushInStart() function.

pushInStart( config );

[Bromulus]

Thank you so much for taking the time. I sent you an email.