cbravo Posted June 9, 2020 Share Posted June 9, 2020 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 More sharing options...
GreenSock Posted June 9, 2020 Share Posted June 9, 2020 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. 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? 3 Link to comment Share on other sites More sharing options...
cbravo Posted June 10, 2020 Author Share Posted June 10, 2020 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 More sharing options...
ZachSaucier Posted June 10, 2020 Share Posted June 10, 2020 1 hour ago, cbravo said: Any thoughts on an alternative? Use a big timeline whose values are calculated based on the distance at the start. Link to comment Share on other sites More sharing options...
iDVB Posted June 10, 2020 Share Posted June 10, 2020 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 More sharing options...
ZachSaucier Posted June 10, 2020 Share Posted June 10, 2020 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 More sharing options...
iDVB Posted June 10, 2020 Share Posted June 10, 2020 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 More sharing options...
ZachSaucier Posted June 10, 2020 Share Posted June 10, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now