Jump to content
Search Community

ScrollTrigger on timeline - ignore animation step on backwalk

chrisi51 test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hey there, 

 

i just struggle a bit with ScrollTrigger. I have an animation similar to my posted pen. Animation is on scroll ... on end of the animation there are clickable elements which change attributs of the main element (on pen its just the fill). The fill is also changed to yellow in the animation before you can click to prepare the clickable elements for their actions. (on my real animation there is content which have to disappear before the controls can make other content visible )

 

when i scroll back top those changes are also going reverse but the yellow fill is also reanimated instead of going to black directly. 

 

hope you understand, what i mean :)

Thanks for your help in advance.

See the Pen xxONJGx by chrisi51 (@chrisi51) on CodePen

Link to comment
Share on other sites

The same problem i have with function calls via .add() in that timeline. 

To start section animations i build some function which init the local animation and remove them if you passed the section. This is working from top to bottom but in reversed direction the functions also get called in the reversed direction. I used a second scrolltrigger to address that problem, what is working but is less comfortable at changes on the main timeline. So i thought the way to use .add is the better way but it seems to not know something like enter or enterBack.

 

I've updated my pen. At this point, where the 3 circles get out of the big black one, it should say "animation started" and after the circles are in final position, it should say animation stopped. Thats what works. But on the way back it should be in reversed order. So stopping have to say started and so on.

 

Do you have any suggestions?

Link to comment
Share on other sites

So you want to CHANGE the timeline that's getting scrubbed? So the tween to yellow should be updated to whatever circle color you click? You could just keep a reference to that tween, make it a fromTo() so that it's sure to use the correct starting and ending values, and update its final value. Then call invalidate() to force it to flush its internally-recorded starting/ending values and snag them again on the next render, like this: 

See the Pen a7644bb629503ac2484b664b609ad37a?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? 

 

If you don't really need scrubbing enabled, this could be even easier. But what's tricky about your scenario is that you're asking it to scrub a timeline that you actually want to CHANGE on-the-fly, so a lot of it isn't about scrubbing an existing timeline but rather creating entirely new, dynamic tweens. 

  • Like 4
Link to comment
Share on other sites

i don't know wether changing it is really the right way. i understand your pen, even if i did not knew, that there are stuff like that :)

 

At least the functions createAnimation and stopAnimation are in wrong direction on the way back. could i add a function, which is checking, in which way we scroll and then call the propper function instead of calling them directly? 

 

on that way i also could handle the color switch, i guess. 

Link to comment
Share on other sites

2 hours ago, chrisi51 said:

At least the functions createAnimation and stopAnimation are in wrong direction on the way back. could i add a function, which is checking, in which way we scroll and then call the propper function instead of calling them directly? 

The easiest thing to do would probably be to detect the direction of the ScrollTrigger within one of those functions. To do so create the timeline and ScrollTrigger separately (using .create() for the ScrollTrigger) and save the reference of the ScrollTrigger for us later.

  • Like 3
Link to comment
Share on other sites

19 hours ago, ZachSaucier said:

The easiest thing to do would probably be to detect the direction of the ScrollTrigger within one of those functions. To do so create the timeline and ScrollTrigger separately (using .create() for the ScrollTrigger) and save the reference of the ScrollTrigger for us later.

seems like i only can use the self object with information about direction in a separat scrolltrigger object, what u already mentioned. Isn't there a way to use it also on a timeline add function?

 

@GreenSock @ZachSaucier

at the moment i actually have a separate scrolltrigger object but the point is, that its very unflexible to handle according to the very long timeline. there is a central element following the scroll down animation so its always in the point of view. i have to start and stop an animation very precisely according to the position of my central element, what made me thinking about putting those functions into add() of the timeline. but then i get the described problem and there seem to be no way to determine the direction.

 

I guess that would be a nice feature if its not already there and i just don't understand how to use it :)

 

But i can go with your suggestion for the moment.

Link to comment
Share on other sites

  • Solution

@chrisi51 I read your post a few times and I'm not quite sure what you mean. It should be quite easy to determine the direction of scroll from within any function (regardless of if it's add()-ed to a timeline). Every ScrollTrigger has a "direction" value. And you can get the ScrollTrigger on a particular timeline with timeline.scrollTrigger. 

let tl = gsap.timeline({ scrollTrigger: {...}});
...            
tl.add(() => {
  console.log(tl.scrollTrigger.direction);
});

Is that what you're looking for? 

  • Like 2
Link to comment
Share on other sites

2 hours ago, GreenSock said:

@chrisi51 I read your post a few times and I'm not quite sure what you mean. It should be quite easy to determine the direction of scroll from within any function (regardless of if it's add()-ed to a timeline). Every ScrollTrigger has a "direction" value. And you can get the ScrollTrigger on a particular timeline with timeline.scrollTrigger. 



let tl = gsap.timeline({ scrollTrigger: {...}});
...            
tl.add(() => {
  console.log(tl.scrollTrigger.direction);
});

Is that what you're looking for? 

 

outch ... that is EXACTLY what i was looking for xD

 

sorry, im so new to gsap and have to lean all those properties and stuff you can use in different contexts :)  + broken english expertise :) 

 

Thank you @GreenSock for your help and especially for gsap and all its components!

 

PS: this is by far the fastest and most active community i've ever seen when it comes to such individual questions.  gsap and its forum helpt me so much the last days and only on that way im able to accomplish my project. i really appreciate that!

  • Thanks 1
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...