Carl

I think this should do the trick
 

See the Pen XWEodKZ?editors=1010 by snorkltv (@snorkltv) on CodePen
 
for each blurb you can call querySelector() like so 
 
gsap.to(blurb.querySelector(".image-container img")...  

sounds like you're looking for fastScrollEnd
 
 
 
Check out the 3.8 release notes for demos and more
 
 

Cool demo. I can't really dive into the three js or anything, but keep in mind that onEnter and onEnterBack are callbacks for ScrollTriggers not timelines. I didn't see them anywhere in your code so I don't know what you have tried.
 
Please consult this demo here that shows how to use these event callbacks to change the text. They only fire once each time they are needed so hopefully this helps
 

See the Pen qBrRaeX?editors=1010 by GreenSock (@GreenSock) on CodePen

give all the tweens a position parameter of 0. if you need more help please provide a minimal demo so we have some idea of what your code looks like and what you are trying to do. thx.

Hi
 
Thanks for the demo. It's always good to start with small examples like this. Good job!
 
I think you are just looking for scrub:true
 

See the Pen dyJjEwK?editors=0010 by snorkltv (@snorkltv) on CodePen
 
Hopefully this helps

As noted previously the speed is going to all be determined by
how fast user scrolls how large the scroll area is (determined by position of end markers) the relative durations of all the animations to each other another factor is easing on the individual animations. I added a power3.in ease to the large circle growing. this means it will scale at a slower rate at the beginning, but of course if the user scrolls super fast... it will still be super fast.
 

See the Pen NWXYzZv?editors=1010 by snorkltv (@snorkltv) on CodePen
 
Also consider that on a large screen the circle has to grow bigger than it would on a small screen in the same amount time also lending itself to grow faster.
 
Glad you were able to find this demo helpful. It's from my course ScrollTrigger Express, packed with over 25 lessons to help folks better understand how ScrollTrigger works and avoid the issues that commonly drive them to the forums. If you are just starting with ScrollTrigger I think you'll find it a tremendous help.
 
The mix-blend-mode works nicely to fill the text, but If you want to really replicate the effect you referenced with the color changing (black and white) check out @PointC's tutorial on svg masking
 
https://www.motiontricks.com/invert-svg-text-with-a-mask/
 
 

Hi @Patte welcome to the forums,
Thanks for the demo. 
This ended up being an interesting challenge for me that I could not easily solve. 
 
A few things to consider
With text split into lines it is going to need to be split differently for various screen widths. If we use batch() the number of items to be animated is going to change as the screen width changes Text that is split is going to need to be reverted and resplit every time a resize occurs ScrollTriggers are going to need to be completely cleared out or rebuilt every time a resize occurs I thought the solution would lie in tapping into onRefresh. However onRefresh happens on initial creation of the ScrollTrigger so I got into an endless loop of reverting text, re-splitting it and creating a new ScrollTrigger that did the same stuff again... So I basically failed at my first attempt to figure this out.
 
What I ended up doing was creating my own debounced resize event (only fires when resizing is finished, not while it occurs)  called killAll() which does the following:
reverts all the text kills all the ScrollTriggers created from the batch() calls the init() function which starts everything over again  

See the Pen wvpmaez?editors=1111 by snorkltv (@snorkltv) on CodePen
 
it seems to hold up reasonably well in my limited tests.
 
Would definitely be interested to see if anyone or team @GreenSock members have a better solution 
 
 

Hi and welcome to the forums,
 
For something like this I think the trick is to NOT think of them as individual bars but more like stacked full screen elements that just animate left at different rates. You don't control the width of anything, just the x value.
 

See the Pen mdpMwWY?editors=1010 by snorkltv (@snorkltv) on CodePen
 
In this example I'm doing a stagger on the top image and 3 colored full screen divs underneath it.
You can get drastically different results by changing
duration of animation ease of animation stagger: each stagger: ease I set up GSDevTools for you so you can scrub through and explore the timing.
 
If you are just starting out, you can take my complete GSAP beginner's course for free it has videos on staggers and the advanced stagger properties used in this demo.

try tween.invalidate().restart()
 
sneaky @pointC jumps in but here are the docs in case you want to learn more
 
 
https://greensock.com/docs/v3/GSAP/Tween/invalidate()

This was kind of fun to make and borrows from some technique's I've seen @GreenSock discuss. It will most likely be a video lesson in ScrollTrigger Express very soon
 

See the Pen eYyBooE?editors=0110 by snorkltv (@snorkltv) on CodePen

Thanks for the clean demo. Very helpful!
 
Great job converting the label to a scroll position too!
 
Since you already did the hard work I was able to tap into the ScrollTo Plugin using a set() to automatically jump to the position
 
gsap.set(window, {scrollTo:position})  

See the Pen PoEPxwM?editors=1011 by snorkltv (@snorkltv) on CodePen
 
It's important to note that in order for this to work well I had to change your scrub value from 1.2 to true. When scrub was set to 1.2 it means the scroll position would need to "catch up" to where it was set, thus resulting in a little animation. Change it around to see what I mean.
 
Also I loaded ScrollTo and the other plugins using the JS settings tab (click the gear across from the JS tab)
 
You might appreciate the Free lesson I just released on using ScrollTo with ScrollTrigger. It seems you know quite a bit but it may show you another cool trick using the start and end values of a ScrollTrigger
 
https://www.creativecodingclub.com/pages/free-lesson-scrollto-scrolltrigger
 
 

Hi and thanks for providing the demo!
 
There's probably a few ways to achieve this but what I did:
modified the logo css to reflect where I want the animation to end: small, centered, with position fixed added an animation to the ScrollTrigger that animates from the big and centered values set the scrub value to true and removed the toggleActions.
See the Pen gOoaoYL by snorkltv (@snorkltv) on CodePen
 
 
Hopefully this gets you in the right direction!
 
If you want loads of ScrollTrigger tips and tricks, here's a shameless plug for my course ScrollTrigger Express

If your end goal is just brightness / exposure effects you can do that just with css filters and gsap as @OSUblake suggested.
Here is a demo and video from one of my courses
 

See the Pen mdOBLoR?editors=0010 by snorkltv (@snorkltv) on CodePen
 
Full Lesson Video
 
If you want to check out my courses you can access my complete GSAP 3 beginner's course for free (link below).
 
I'd be happy to extend a 15% discount if you want to purchase Lifetime access to my full course bundle (over 140 lessons and growing weekly).
Just use coupon code: gsforums at checkout within the next 10 days.
Learn GreenSock at creativeCodingClub.com
 
If you're serious about getting back into GSAP I'm confident this training will save you loads of time.
 
Unless you have good working knowledge of working with the HTML <canvas> element AND the EaselJs library I don't think it's a good place to start with GSAP. You will do MUCH better working with HTML, CSS and basic SVG elements. 
 
 
 
 

Hi @marko krstic
here I looped through all the circles and assigned them an animation along a path.
the animations have random delays which means they won't start in order 1 - 9.
see if this works for you
 

See the Pen OJOOZXo?editors=0010 by snorkltv (@snorkltv) on CodePen
 
*edit: I changed the delay so that the first circle starts immediately at time:0 and the rest have a random delay using
delay: index == 0 ? 0 : "random(0.1,5)",  

Hi there seems to be some misundertandings.
 
There is no onReverse method or callback in all of GSAP (Tweens, Timelines, ScrollTrigger, etc).
There is an onReverseComplete callback on Tweens and Timelines which fires when an animation is done reversing.
 
onStart is a callback for tweens and timelines
 
onEnterBack is a callback for ScrollTriggers and belongs in the ScrollTrigger config object
 
How you are using it here is incorrect.
 
Please see comments in code below
 
let fourthTransition = gsap.timeline({   scrollTrigger: {     trigger: "#main-container-5",     id: "container5",     start: "top top",     end: "top top",     markers: true,     toggleActions: "play none reverse none", /* *** You could put an onEnterBack here *** */ onEnterBack:function(){}   }, /* *** There is no such thing as onReverse() *** */   onReverse: () => {     console.log("on reverse!")     document.querySelector("#fixed-text").innerText = "13"   },   onStart: () => {     console.log("START!")   }, /* *** onEnterBack() does not belong here *** */   onEnterBack: () => {     console.log("on enter back")     document.querySelector("#dinamic-text-5").innerText = "15"   }, });  

Hi @Josh Mathis
 
Thanks for the demo. 
You were really quite close.
 
To get around ONLY the last item opening and closing it was just a matter of declaring the tl variable with let like so on line 13
 
let tl = gsap.timeline({ paused: true });
 
After that it seems to work fine.
 
if you want to just toggle the open and closed state of each faq independently on click you can simplify your click code a lot like this

See the Pen QWOLoyK?editors=0010 by snorkltv (@snorkltv) on CodePen
 
If you want to automatically close the open item every time you open a new item you can do something like this

See the Pen eYeOXRV?editors=0010 by snorkltv (@snorkltv) on CodePen
 
 
Notice how I'm assigning an "animation" property to each faq. This makes it easy to target a particular faq and its animation.
 

there are few ways to do this. if you want to avoid tracking how many times the 2nd part has played without incrementing a variable or something you can lean on tweenTo() and tweenFromTo()
 
I put 2 labels in your banner: after the first tween and after the end of the timeline
Then I created a main timeline that tweens to the first label and repeats a tween between the first label and last
 
let main = gsap.timeline() .add(tl.tweenTo("banner")) .add(tl.tweenFromTo("banner", "end", {repeat:1}))  

See the Pen dyVwMZz?editors=0010 by snorkltv (@snorkltv) on CodePen
 
This video from my courses should help explain a bit more
 
 
 

Glad to hear you are enjoying GSAP 3 Express! Currently the Free Trial of the course and a handful of bonus lessons get released over the course of a week. Students who want to learn more faster have the option of unlocking all my courses (over 130 lessons) for less than $10 a month. 
So far it has provided a nice balance of allowing thousands of students to learn GSAP for free while I still make some money (necessary). 
 
One of my lessons covers how to loop through multiple elements and assign them an animation. When you interact with that element its animation will play or reverse. If you choose to "open" an element we use a variable to track which element is currently open so we can close it
 

See the Pen BaLWxLW by snorkltv (@snorkltv) on CodePen
 
In your approach you are creating an animation BEFORE you are applying your classes that you are using to select the target of the animation. 
 
When you add and remove classes it has zero impact on tweens that you created prior.
 
We typically don't build out full feature requests here, but since you invested the time in providing a demo that was "ready to go" and this could make for a good lesson I made some modifications to account for your recent requests.
 
It may be a bit much for someone just starting out but it builds off the the the techniques in the demo above. 
In the "mouseover" event I'm looping through ALL the menu items and reversing the animations of all the elements that are not being rolled over. 
This is really only necessary to accommodate your request that on initial load all menu items are fully visible.
 

See the Pen vYeybEG?editors=0011 by snorkltv (@snorkltv) on CodePen
 
Note, I'm not adding or removing any classes but you can add that in if for some reason it's necessary. Hope this helps!

Akapowl is correct, I was in the process of grabbing a screenshot so here it is.
BTW i find the UI for this kind of troublesome as I'd rather have "ENABLE RUN BUTTON" instead of turning off the auto updating preview.

First, thanks for the great demo. It's rare that we see a complex scenario so cleanly stripped down to the bare necessities.
 
I know you said you couldn't specify the duration of each timeline due to the complexity, but i just want to make sure you know that you can dynamically assign the duration when the scrolling timeline is inserted into globalTimeline.
 
globalTimeline.add(animateScrolling()).add(animateBox().duration(globalTimeline.duration()), "<");
 
See if this works for you:

See the Pen mdBVxxE?editors=0010 by snorkltv (@snorkltv) on CodePen
 
My second suggestion was to use the progress of the ScrollTrigger to adjust the progress() of the scrolling timeline onUpdate but I got funky results. Perhaps we can pursue that more if this first solution doesn't work for you and your setup

doh! sorry about that, totally missed that in the initial post.
see how this works. I basically set the tween up to check to see if you are hovering or not to see if it should keep playing every time it gets back to its starting position.
 

See the Pen bGrLQMM?editors=0010 by snorkltv (@snorkltv) on CodePen
 
@GreenSock I found an odd behavior here. When the tween plays forward through the first iteration and then yoyo's back to the starting point the progress() of the tween is 0, yet calling play() doesn't advance the playhead forward. I had to call restart() to get the tween to advance. 
 
Note it's important that I have the play() in there too

great to see you applying what you learned in the courses to your own projects!
 
I didn't have any trouble removing the GSDevTools line.
 
However, I don't think you want that position parameter of ">-50%"
 
see if this works for you
 

See the Pen JjyXmXg?editors=0010 by snorkltv (@snorkltv) on CodePen
 
for others watching. the animation in question was the text "testing testing testing" near the bottom.
it seems like it is being triggered properly now

Hi and welcome to the GreenSock forums,
 
Thanks so much for the clear demo.
 
You can use an onComplete callback to apply clearProp:"all" to remove the inline styles.
Be sure to inspect your box after the animation runs in the demo below

See the Pen bGrVwxv?editors=1010 by snorkltv (@snorkltv) on CodePen
 
more on clearProps: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin#h3-clearprops
 
this video on callbacks and scope may help too
 
 

Hi and welcome to the GreenSock forums,
 
thanks for providing the demo.
 
it seems your animation is set up to start with the menu open and then close it.
I forced the animation to it's end (closed state) using progress(1) at the end of the timeline.
 
it also seems your css is set up so that the page loads with the menu items visible. 
I set the opacity to 0 in the css and toggle it back to 1 once the page is loaded using 
 
gsap.set(".menu-overlay", {opacity:1})  

See the Pen PojVQLv?editors=0110 by snorkltv (@snorkltv) on CodePen
 

judging solely from the code you provided you have a typo in that you are missing the closing ) and you probably should use leading 0s
 
try
gsap.to('.box', 3,{x: 1000, ease: "slow(0.1, 0.7)"}); and it looks like you are loading EasePack from 2 sources. just use 1 of them