Jump to content
Search Community

Chaining Scrolltriggers on the same target. Possible bug?

cbravo test
Moderator Tag

Recommended Posts

I am having some problems chaining together two animations of the same element that both have a scrolltrigger on them.
The effect I am trying to go for is I want the circle to animate downwards and meet the blue div as it scrolls into the viewport and then animate upwards once it reaches a certain point in the viewport.  

it seems that chaining the animations behaves differently when there is a scrollTrigger vs when there is not.   Without a scrolltrigger, the sphere animates as expected. It stars at y:0 moves down 300 pixels...and then back up. But with the scroll triggers there is a jump where the second animation is animating from the initial position  starting at Y:0  moving down 300 pixels  jumping back up to Y:0 and then moving up 300pixels.

Am i doing something wrong?  

https://codesandbox.io/s/circle-to-image-jtye8

side note: it seems to work once hot reload takes effect

See the Pen by s (@s) on CodePen

Link to comment
Share on other sites

  1. I wouldn't generally recommend putting multiple scrollTriggers on nested animations inside a timeline. Normally, an animation's playhead is controlled by its parent timeline (as its playhead sweeps over the child tweens, it updates their playheads accordingly) but you're ALSO telling the ScrollTrigger to control the playhead in a totally different way, so those would conflict. And When you assign a ScrollTrigger to an animation, it'll get paused anyway, so it's rather pointless to have it nested in a timeline (paused tweens won't get rendered by their parent timeline moving its playhead). 

    It's totally fine to have a ScrollTrigger on an entire timeline - it's just odd (and not advisable in general) to have multiple ScrollTriggers in nested tweens. 
     
  2. By default, ScrollTrigger will render the tween immediately in order to lock in the values and maximize performance, but you're using relative values that depend on other animations completing before the relative values get computed. Try adding immediateRender: false to that 2nd tween. 

Does that help? 

  • Like 3
Link to comment
Share on other sites

That did fix the problem!

But you have me thinking about alternative approaches. If what I am doing is not advisable I am wondering though how you would use scrolltrigger to have a single element follow the user down the page and interact with different elements as the user scrolls down the page.   Picture a long scroll page with images alternating on both the left and right of the screen.  What I would want is to have an element, a circle in this case, move left and right behind the images as the user scrolls down the page. Kind of like my codepen only with several more elements.  Since I don't know the distance between the elements vertically I figured I would use multiple nested scrolltriggers but you are saying that is not advisable. Any thoughts on an alternative?

Does that make sense?

Link to comment
Share on other sites

3 hours ago, ZachSaucier said:

Use a big timeline whose values are calculated based on the distance at the start.

Thanks @ZachSaucier

I'm a colleague of @cbravo 's, can I take a stab at explaining what our goal is and we'd really appreciate any direction or examples on how we might accomplish it.

 

We have a long scroll site that have lets say 10 things/points statically in the page flow that we want a single circle to interact with as you get to them in the scroll. With your "calculate values on distance at start" what does that mean to you and what does that look like with scrolltrigger?

 

The end animation will be more complex and be something similar to this site https://rappipay.mx/, in that there is a single thing flying down the page on scroll and interacting with this. However, the difference here is the stage/view and these things are fixed position and animating into the stage, vs what we want which is things actually in the natural flow of the page being interacted with as you scroll down.

 

Link to comment
Share on other sites

3 minutes ago, iDVB said:

The end animation will be more complex and be something similar to this site https://rappipay.mx/, in that there is a single thing flying down the page on scroll and interacting with this.

Notice that the path that the card follows is a fixed size in that site, both horizontally and vertically. The content around it is more dynamic but they don't resize it at all. You'd be wise to create something similar :) 

 

But what I mean is that if you need something to be based on dynamic positions, then use element's bounding box to get its position and then calculate how far the element needs to go.

Link to comment
Share on other sites

Ya, its just that we're not sure how that looks with respect to scroll trigger. 

Since the scroll trigger's start and end are based on the percent the trigger is at in the viewport. 

Since you are suggesting using one lone timeline for the whole page scroll.... that sounds to use like the trigger is "the page" 

but then those start and end's don't seem to make sense to us.... when is the page NOT on the screen.... or when is it at 30% of the screen... when its basically always on the screen.  Hope that helps. I'm sure there is a fundamental gap in our understanding.

Link to comment
Share on other sites

30 minutes ago, iDVB said:

Since you are suggesting using one lone timeline for the whole page scroll.... that sounds to use like the trigger is "the page" 

but then those start and end's don't seem to make sense to us.... when is the page NOT on the screen.... or when is it at 30% of the screen... when its basically always on the screen.

So create a container for the section where you're wanting things to move and use that container as the trigger? 

 

Forget about ScrollTrigger to start. Create a timeline that moves whatever element you're wanting to move to where you're wanting to move it. Then attach it to a ScrollTrigger as necessary :) 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...