[How to have multiple svg paths animation with start delay and different repeatDelay?]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo.

 

The right way in my opinion would be to use the MotionPath Plugin.

Here are 2 demos I used in recent lessons in my course SVG Animation with GSAP.

 

See the Pen zYyBKmG by snorkltv (@snorkltv) on CodePen

 

 

See the Pen JjwJrqq by snorkltv (@snorkltv) on CodePen

 

Hopefully these help

[Text Fill Up Gradient Animation]

glad to see you got the help you needed. here are a few additional examples from my GSAP courses that may help with the ScrollTrigger implementation. 

 

 

See the Pen jOVoYXg by snorkltv (@snorkltv) on CodePen

 

See the Pen KKNEYqw?editors=0100 by snorkltv (@snorkltv) on CodePen

[Pinned Section with continuous Scrolling Items]

oh and here is a similar result with a different layout. 

notice the right side gets pinned while the rest of the page naturally scrolls by. 

there is no need to animate the content with a tween.

 

This is the start of a much more elaborate lesson in my ScrollTrigger course, but maybe it helps too

 

See the Pen oNaNgLg?editors=1010 by snorkltv (@snorkltv) on CodePen

[Pinned Section with continuous Scrolling Items]

Hi and welcome to the GreenSock forums.

 

Thanks for the clear demo. It shows you're really trying.

You did a good job of setting things up. 

However, getting this done right takes a bit of experience with the subtleties of the API.

You'll need to really understand things like pinning, function-based values, dealing with responsive settings etc.

 

I've done something similar in a recent lesson so I was able to quickly make some modifications.

 

 

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

 

Note: a big part of what you need is to figure out how far the yellow boxes need to move. I did this in the getScrollDistance() function. With invalidateOnRefresh set to true that function will re-run automatically on resize.

 

Hopefully this demo is enough to give you something to experiment with.

 

Be sure to study all the ScrollTrigger properties in the docs as that will help greatly.

 

If you want to do more with ScrollTrigger and GSAP I encourage you to check out my GSAP course bundle, I cover all these things in detail.

 

Good luck on the project!

 

Carl

 

 

 

[ScrollTrigger Pin + other triggers after]

thx for the demo. I've never had to use this but check the ScrollTrigger docs for pinnedContainer.

 

i think setting it to "main" on the second ScrollTrigger solves your issue.

 

See the Pen MWZoEgp?editors=0010 by snorkltv (@snorkltv) on CodePen

 

be sure to thank @GreenSock for adding all these wonderful features 

[want to archive this the scroll animation please help]

Nice job, @Toso. very cool!

[Need Assistance Implementing Dynamic Scroll Effects]

update. I did end up making a complete tutorial on this effect and it's on YouTube:

 

 

Here's the finished demo too:

See the Pen 36e8db0379aa8cbac7608b0ff0d1f46d by snorkltv (@snorkltv) on CodePen

 

 

[Card Flip animation not working]

Hi and Welcome to the GreenSock forums,

 

Thanks for the demo. It seems you might want to take a few steps back here and get 1 card to flip the way you want before you worry about a lot of cards or even hooking up ScrollTrigger.

 

Here's a demo from one of my courses, perhaps it will help you get your cards setup in a simpler fashion

 

See the Pen VwKGVjb?editors=0010 by snorkltv (@snorkltv) on CodePen

 

And to add ScrollTrigger you can do something like this

 

See the Pen gOZWaQj?editors=1010 by snorkltv (@snorkltv) on CodePen

 

Hope this helps.

 

If you want to learn GSAP inside and out, check out my complete GSAP course bundle, it will guide you through all this and so much more.

 

[How can I aHow can I create scroll animation?chieve this kind of scroll progress animation?]

@Toso has a great idea. I found this interesting so I did this with a clipPath on a group. I'm just animating an orange rectangle's scaleX inside the clipped group.

 

See the Pen gOZmQVZ?editors=1010 by snorkltv (@snorkltv) on CodePen

 

If you need help hooking it up to ScrollTrigger and making it work with that curve going down, it's going to be a bit more work, and not something I can do for you, but hopefully you've got some ideas now to get started.

[How to animate these blocks by block?]

Hi and welcome to the GreenSock forums,

 

Typically it is best to provide a minimal demo showing what you have attempted. This way we can help guide you.

 

However, I had recently shared this demo with my students, perhaps it will help you get started.

 

See the Pen QWJNmQb?editors=0010 by snorkltv (@snorkltv) on CodePen

 

If you need help learning ScrollTrigger be sure to check out my comprehensive GSAP training.

[How to do elements opacity with transition using GSAP ScrollTrigger and in the frame?]

Hi and welcome to the GreenSock forums,

 

It seems you found a demo from my ScrollTrigger Express course (38 video lesson) where I teach all the necessary features of ScrollTrigger.

This demo is part of a 5-part video series that goes over every line of code.

 

The reason why the images aren't fading is because you have the animation set to be controlled via scrubbing (scrub:true) but your start and end values are identical so there is no distance to scrub.

//bad

start:"top 50%",
end:"top 50%",



//better

start:"top 50%",
end:"top 40%",    

Here is the modified demo

 

See the Pen XWoMpdb by snorkltv (@snorkltv) on CodePen

 

Frankly I'm not a fan of scrubbing through opacity changes like this as the user can stop while the image is only partially faded in and it looks bad.

I prefer controlling these animations with toggleActions which force the animation to play through in both directions as the trigger enter and leaves.

 

See the Pen zYyZNBv by snorkltv (@snorkltv) on CodePen

 

 

If you need more help understanding the basics of ScrollTrigger and GSAP check out my complete GSAP course bundle. I think you will find the lessons extremely helpful

 

Good luck on your project!

 

Carl

 

 

[ScrollTrigger and Motionpath HELP !!!!]

I don't know. You seem to have a lot of custom logic that hijacks the normal scroll behavior and inputs and I can't really dig into that.

[Responsive Horizontal Scroll]

Do you have a fork of your fix working? I'm curious what a comms issue is.

 

check this update. you should be able to see the magenta right border on the last item after resizes

 

See the Pen LYMxvra?editors=0010 by snorkltv (@snorkltv) on CodePen

 

Look at the tween() function

 

this.sc = ScrollTrigger.create({
            end: () => `+=${this.getScrollAmount() * -1}`,
            trigger:this.DOM.element,
            animation:this.tween(),
            start:this.start,
            pin:this.DOM.pin,
            markers:this.markers,
            scrub:1,
            invalidateOnRefresh:true,
          
        }) 

tween(){
      console.log("new tween returned")
        return gsap.to(this.DOM.wrapper, {
            x: this.getScrollAmount(),
            ease: "none",
        });
    }

 if you check the console logs while resizes you will see that "new tween returned" only gets called once on initial load... not on resize.

 

On resize we have invalidateOnRefresh set to true.

This means that the animation associated with the ScrollTrigger will have its values flushed and reset.

It doesn't mean that the function that returned the animation will be called again.

When tween() first runs this.getScrollAmount() runs and returns the x value. That x is sort of hard-coded into the tween.

The only way that value will change is if it was originally a function-based value, not just a value returned by a function.

 

I found this fix to do the trick

 

tween(){
      console.log("new tween returned")
        return gsap.to(this.DOM.wrapper, {
            x: ()=> this.getScrollAmount(), //function-based value ()=>
            ease: "none",
        });
    } 

 

An odd side issue however is that somehow the getScrollAmount() is slightly off and I had to subtract an arbitrary number of pixels.

 

return -(racesWidth - window.innerWidth) -20

 

hope this gets you close enough.

 

Its always fine to ask questions but I'm confident that with the more lessons you do you'll be able to figure out more on your own.

This one was a bit tricky for sure.

 

 

 

 

[Set Y postion with a .to]

Yup, @alig01 is exactly right. The trigger elements should not be what you are animating especially along the y axis. Their positioning is crucial for ScrollTrigger to get proper measurements. Perhaps you can run a script that wraps your text in wrapper divs (to be used as triggers)  PRIOR to ScrollTrigger running.

[ScrollTrigger and Motionpath HELP !!!!]

if you were to remove everything except for the motionPath animation you would see that it slows down at the end because all tweens have a default ease of "power1.out". Try using ease:"none" and see if that works better.

 

section_2.to(rec, {
        motionPath: {
            path: path,
            align: path,
            alignOrigin: [0.5, 0.5],
        },
        immediateRender: true, ease:"none"
    })

 

[Responsive Horizontal Scroll]

glad to hear you enrolled in the courses!

 

For debugging I would suggest you log all the dynamic values you are using whenever you expect them to update.

I added some logs in the tween() and getScrollAmount() functions.

 

Also it's good to outline all the items you are getting measurements from.

 

It seems something funky is happening with your wrapper. Its border doesn't seem to enclose all of its child elements

I'm guessing this is affecting the measurement values you're getting.

 

 

 

take this demo and resize it and scroll up and down. you'll see things break out of the red outline

 

 

 

See the Pen JjwEvYZ?editors=0010 by snorkltv (@snorkltv) on CodePen

 

I'd suggest going through the css and seeing if there is an alternate setup you can use.

also play around with pin spacing on and off to see if that changes anything.

[Responsive Horizontal Scroll]

Hi, As the person who created that demo originally, I think it's a very solid base.

See the Pen PoxojaO?editors=0010 by snorkltv (@snorkltv) on CodePen

 

 

I really don't know what you mean by "it doesn't respond well". Perhaps you can be more clear.

 

the getScrollAmount() function gets called when the window is resized or the ScrollTrigger is refreshed. Those values are neccessary for all the configuration work to happen. You most likely should not delay those calculations.

 

If you need more flexibility look into gsap.matchMedia() as it will allow you to run custom code when you hit certain break-points in browser size and do whatever cleanup or configuration you deem necessary.

[Using the same GSAP Timeline to control multiple elements]

Great job! Thx for posting the working demo. I'm sure it will inspire others too. 

[Using the same GSAP Timeline to control multiple elements]

Hi and welcome to the GreenSock forums.

 

Thanks for the demo.

 

It looks like you are only creating 1 timeline with all the animations in it.

 

The approach I recommend is to create a timeline for each element and then that element can play and reverse its animation on enter/leave

 

here is a demo from a lesson in my Free GSAP Beginner's Course

 

See the Pen WNZLoNg by snorkltv (@snorkltv) on CodePen

 

Check out the course as it will get you up to speed with the latest syntax too.

 

TimelineLite still works but isn't recommended.

 

 

[Two-part Boxed Slider Reveal]

so in the previous version you'll notice that you have to scroll a bit before the next section slides up.

 

This means that there was some dead space in the beginning of the timeline.

 

Since the loops were skipping the first panels when i === 0 then that means the first elements to be animated were being inserted at a time of 0.5 from the (i * duration) position parameter.

 

We want the first position parameter to be zero so we can just use

 

(i-1) * duration

 

See the Pen QWzEKbm?editors=0010 by snorkltv (@snorkltv) on CodePen

[Two-part Boxed Slider Reveal]

thanks for the clean demo!

that's a neat effect. yeah the problem is that your first loop runs all the way through before the second loop runs.

note that both loops now use i*duration when every tween is added to tl.

 

See the Pen YzdWqmB?editors=0010 by snorkltv (@snorkltv) on CodePen

[Timeline repeat+yoyo | I would like to skip some of the steps after the return of the yoyo]

Hi and thanks for the demo.

 

A yoyo is added when you need a repeating timeline to animate forwards and backwards the same way.

 

If you want to do something different in the reverse direction then using yoyo isn't going to be a manageable solution.

 

From looking at the code you provided it looks like it's a bit over-engineered for something that should be a bit simpler.

 

Unfortunately I'm really not following exactly what should happen.

 

In a case like this I would suggest you build a single timeline that ONLY plays forward and clearly shows how everything should appear and disappear. Put all the tweens in the timeline and don't use any function calls or conditional statements to build the animations.

 

At that point we can look at it and see common patterns and then advise you on how some of it can be optimized with functions that return timelines or loops or whatever.

 

While reading your description it kind of reminded me of this lesson from GSAP 3 Beyond the Basics where dynamic content shows and hides throughout a timeline. Perhaps something like this will help

 

See the Pen XWmdPBv by snorkltv (@snorkltv) on CodePen

 

 

[Making autoAlpha go from 0-1 and then to .7]

Yes, building a sequence as @alig01 suggested is what I would also recommend to anyone starting out.

 

As you get more comfortable with GSAP you may want to look into CustomEase

 

See the Pen QWzyZXp by snorkltv (@snorkltv) on CodePen

 

I added scale as a property too as the change to opacity:0.7 is fairly subtle

 

Click here to see the ease graph

 

 

 

Also if you want a single-tween solution you could explore CSS Keyframes in GSAP

 

 

[Move input range slider programmatically]

I would create a single animation that has an onUpdate function that is used to update the slider value and the displayed number

 

See the Pen qBLOwZR?editors=0011 by snorkltv (@snorkltv) on CodePen

 

 

 

 

[Pin problem]

The white space is caused by the pin-spacer. this creates the necessary scroll distance for the user to continue scrolling while the elements are pinned. Please see the docs for my pinSpacing video https://greensock.com/docs/v3/Plugins/ScrollTrigger (which is also in ScrollTrigger Express)

 

1 hour ago, ilyasseisov said:

Can the purple section be fixed in place until image is done moving?

Yes, and it is fixed in place in the demo above as that is the one that is being pinned. Do you see it moving?

 

When dealing with pinning, I've found for the best visual result you can just give the pinned element a height of 100vh. This way you don't see what's happening above or below as the page is scrolling:

 

See the Pen RwEWjMV by snorkltv (@snorkltv) on CodePen

 

Another option is to put the section that comes after the pinned element inside the pinned element. So in your case take the last section and put it in the pinned section.

 

Another option is to explore giving surrounding elements or the body the same background color so you don't notice a gap.

you can also style the pin-spacer with

 

.pin-spacer {
  background:green;
}

 

Also, ScrollTrigger Express has a "Pinning Deep Dive" lesson (members only) that shows more about pinning too.