Leaderboard

If you're aiming to create a sine wave animation you can just use a sine ease - like so! https://codepen.io/GreenSock/pen/WNgWJbV?editors=0110 Then the ease does the heavy lifting.

You can setup animation components and import those into your other components in to avoid repeating code. Also, we've found using https://greensock.com/docs/v3/GSAP/gsap.registerEffect() and making the effects into hooks works pretty well across bigger projects.

You shouldn't need to use TimelineLite anymore (as of version 3.0). You can now just use gsap.timeline(). Also, you can write eases as strings now, so no need to import those (unless it's a special ease). More info here:

Hey, @elegantseagulls thank you for this example! Looks really good. Thanks for explanation and advice @Rodrigo. It really helped me! I changed my code and tried something like that: https://codepen.io/Selenee/pen/NWLmyoX I think its the similar effect like Elegantseagulls did? (Only changed my x - changed my mind) Thank you for help ?!

Seems like a webkit render issue, see https://stackoverflow.com/questions/25891362/transition-on-transform-with-border-radius-and-overflow-hidden-doesnt-work-in-s Adding -webkit-mask-image: -webkit-radial-gradient(white, black); to the element with the border radius, seems to fix the issue. https://codepen.io/mvaneijgen/pen/poOBaRd

That's actually more of a CSS issue - ScrollSmoother bases things on the height of the content <div>, but the way you set things up in your CSS, the height of that element is actually 0! Check it out in Dev Tools. It's probably because you're using a lot of float: left stuff. I don't have time right now to dig into the reasons for the height being 0, but that's the fundamental problem here. If you simply adjust your CSS/layout so that the content <div> properly reflects the height of the stuff inside of it, that should resolve everything.

Hi @pravSab, I just tested this code on an iPad (Safari, Chrome and Firefox) and it seems to work: const mm = gsap.matchMedia(); mm.add( "(min-width: 768px) and (max-width: 1023px) and (orientation: portrait)", () => { alert("Foo Bar " + Date.now()); } ); I'm using portrait in this case, since the breakpoints you indicate are the ones in portrait orientation. For landscape I believe it has to be over 1024px. Hopefully this helps. Happy Tweening!

Looks like maybe fouc to me? You'll want to set your initial css property to visibility: hidden; Better details here:

Adding ease: 'steps(1)' to your from and to will fix this, otherwise you can change duration to 0 and add a delay.

Thanks a lot mvaneijgen, looks like it does the trick. Good job !

You'll want to just add buttons to tween the draggable instance by one snapX... More clarity can be found here: and:

Hi, Take a look at this thread as it goes through creating an horizontal animation that "pins" the horizontal movement. Be aware the horizontal pinning is not possible, those examples provided there are just mimicking such feature: Hopefully this helps. Happy Tweening!

Hi @Selenee and welcome to the GreenSock forums! The start position considers the position of the element relative to the viewport. So "center bottom" means when the center of the trigger element hits the bottom of the viewport. In the case of "center center" means when the center of the element hits the center of the viewport. The default is "top top", when the top of the element. Right now your example has "center 60%", that means when the center of the trigger hits 60% of the viewport from the top, while @elegantseagulls example has "center 70%". In these situations is always a good advice to use markers: true in your configuration in order to better understand how start/end points work and when your animations will be triggered. Finally I recommend you to read the ScrollTrigger docs to get a better grasp of how the plugin works: https://greensock.com/docs/v3/Plugins/ScrollTrigger Hopefully this helps. Happy Tweening!

Using from is probably a better bet for this animation: to lengthen duration, you'll want to add a duration: to your tweens. https://codepen.io/elegantseagulls/pen/NWLmGbO?editors=0110 I'm a bit confused as to what you're looking for for "#3"

@GreenSock: Is there a way to exclude a transform style in FLIP? The issue I'm now bumping into is my intertia plugin is continuing to transform my FLIP-element's rotationY slightly as it decelerates... I was hoping setting FLIP to simple: true, or disabling draggable would fix, but it seems not to, can I manually set a parameter? Here's the WIP... It's a bit more complex than my previous demo, but code should hopefully still be pretty easy to follow: https://codepen.io/elegantseagulls/pen/LYJaLNx??editors=0010

That's not a vertical scroller, it's just a nested animation that looks like the section is being scrolled vertically. If I were you I would approach the animations first, separately and without scroll, then when you have all the animations sorted pop them together and hook them up to scroll. This is quite an adventurous start to GSAP if you're just learning, so try to take it small steps at a time. The way to achieve this is by using the container animation technique I linked to - the current approach you've taken I'm afraid we can't help with. Take a look through the resources I provided and good luck!

Yeah, you don't "import" TypeScript definitions as if they were a JavaScript module. Again, I'm not a TypeScript expert but it definitely seems like a configuration thing on your end with your editor and I can't really speak to that, sorry. For almost everyone, all they have to do is npm install gsap and it automatically works in their editor so I'm not quite sure what to tell you. As far as I know, you typically don't have to do anything special. Here's a post from 2019 that indicates as much: I'd be happy to answer any GSAP-specific questions but if you need help getting your editor set up with TypeScript, that might be a better fit for different forums. Or maybe someone else with more TypeScript configuration knowledge can chime in. @Rodrigo?

I can see a types folder inside the gsap module but cannot import it using import {} from "gsap/types" as it shows an error that "gsap/types/index.d.ts" is not a module. So instead I tried importing it standalone using import "gsap/type" and then doing the code below but am confused on what to do next? // ts.config.json { "types": ["gsap/types"] }

Here ya go: https://codepen.io/GreenSock/pen/OJgeKMG?editors=0010 I'm just using gsap.utils.wrap() to set up a wrapper function. You feed any value in and it'll wrap it between those values, so -101 would become 399 since it's wrapping from -100 to 400. Read about the modulus operator here. Does that help?

Make sure for v3 that you DO NOT install @types. That will cause conflicts as the types are already included in the package. For v3, you don't need use typeof like that. We will need to document how users can use some of the global types like this. let tl: GSAPTimeline; // also compatible with TimelineLite/TimelineMax let tween: GSAPTween; // also compatible with TweenLite/TweenMax let tweenConfig: GSAPTweenVars = { x: (index: number) => index * 0.5 }; let tlConfig: GSAPTimelineVars = { paused: true }; tl = gsap.timeline(tlConfig); tween = gsap.to(".foo", tweenConfig);