Leaderboard

Hello orca, This is easily achieved with scrollTrigger and y offset of your image. You can either pin your text or not depending on your needs. Here I am translating the image vertically for the duration of its height - viewport height and attaching that animation to scrollTrigger with scrub:true. https://codepen.io/dadacoded/pen/2f6998e169e9a96ac5ecafe0ac393c53?editors=1010

Hey @joshuawalker - welcome to the forums. The sparks-animation on that site is most certainly based on WebGL - I think they make use of three.js. You can certainly use GSAP to animate those particles through the 3D space, but building something like that is not what GSAP is built for in the first place. Probably some of the examples for particles could be helpful to get you started https://threejs.org/examples/?q=particles#webgl_points_sprites Also there are some other quite useful ressources for something like that https://aerotwist.com/tutorials/creating-particles-with-three-js/

Hey @rubenmeines The kick you are experiencing can be related to a variety of things, depending on how you have things set up. Since what that 'kick' is, can also be interpreted in different ways, it would probably be best if you created a minimal demo of your issue. Most likely it is related to how browsers handle the scrolling on a different thread and that makes it hard to sync things up. If tailbreezy's suggestion with anticipatePin doesn't work for you, maybe these threads can be helpful

Hello there, This code should work as expected. Have you tried to add anticipatePin? It tends to handle what you are describing. If this doesn't solve your issue. Make sure to make a demo, so that we can see it for ourselves in order to solve it. https://greensock.com/docs/v3/Plugins/ScrollTrigger

Hi @joshuawalker Welcome to the forum. Here are a couple examples where I used PixiJS. https://codepen.io/PointC/pen/RyaJmj https://codepen.io/PointC/pen/devBRB The 2000 post demo just uses PixiJS graphics for the sparks and confetti. The popcorn demo uses a .png sprite. These are a little older and I haven't yet had time to upgrade them to GSAP3 but they may give you some ideas. Happy tweening and welcome aboard.

Ah, I understand how. The issue boils down to a misunderstanding of how .from() works: In your second demo, you first have a .to() tween which would animate from whatever the current values are to the given values. But since you have a .from() tween affecting the same properties of the same elements right after the .to() tween, the .from() tween values apply immediately (as I explained in my last post). Then it animates to the starting (before GSAP has done anything) values during the animation. Your .to() only approach works because it animates to the given values in the first tween then animates to the target values in the second tween. So the state isn't set to the target .from() values. The way that you have it is the proper way to handle this situation. Side note: You shouldn't apply a CSS transition on the same properties of the same elements that you're animating with GSAP. That causes some jankiness.

Here is one more option using backgroundPosition instead. https://codepen.io/dadacoded/pen/d14a7a2ce121e939a7728edf729768c4

Hello and welcome, @mikel made something that you may find useful a while ago.

Absolutely, you could even use invalidate() to help make it more dynamic while using pre-created timelines: https://codepen.io/GreenSock/pen/e304b85ee0db4a0f118cf93ab7fc2071?editors=0010 Is that what you're looking for?

That'll clear all inline CSS properties of each tween's target as soon as each tween is done. That's probably not what you want. If you really want to clear everything at the end of the timeline: gsap.timeline({ onComplete: () => gsap.set(".all-your-targets", {clearProps: true}) }); That's highly unusual, though. You do realize that'll revert any changes that were made by the animations, right?

I'm not sure when 3.6.1 is dropping, but I'm sure @GreenSock can send you the updated DrawSVG file. He should be along shortly.

Perhaps relative to the non-scaling-stroke recent thread.

Going forward, can you please click the "fork" button before editing demos that you've already posted to our forums? That way context is not lost for future readers (including myself right now trying to compare the old and new code). I'm not quite sure what you're asking given I can't see both versions. But to add some explanation, by default a .from() tween will immediately apply the starting styles. You can change this behavior by setting immediateRender: false in the vars. However, if disable immediate rendering then you might see a jump when the tween starts. Does that answer your question?

This would add two resize listeners FYI. I recommend just using the second line.

A few notes: You're making a couple of the most common GSAP mistakes: using the old syntax for your eases and not setting all of your transforms on elements being animated with GSAP. You should avoid animating top/left/etc. properties that aren't performant to animate. Instead try to stick to performant properties like the transform properties. If you can, it's best to use a single timeline to control things because it handles conflict more easily. For example in your pen if you click the toggle button quickly in a row it glitches. You could fix that by creating a new relative animation but then the durations would be off in that case (which you could also fix by calculating the distance and using that as a factor of the duration but it's a lot easier to just use a single timeline if you can). It's better to use innerText instead of innterHTML if you're just changing the text. You could simplify a chunk of your code. In terms of handling resize, you could kill off your timeline and recreate it as tailbreezy suggests. It's good to debounce the resize event so it doesn't happen too much. Here's how I'd approach it: https://codepen.io/GreenSock/pen/bGBazVW?editors=0010 Though not directly applicable, I think you'd benefit from my article about animating efficiently as well.

Hey @goellner It looks like snapTo: 1 / (slides.length + 1) works like you intend. https://codepen.io/akapowl/pen/6ff95c629e753916d4a913da8eb7cbdc Is that better? Edit: Or set the start to 'top top' (which by default is 'top bottom' when the ScrollTrigger is not pinning) and use the slides.length like @tailbreezy suggested.

Hello goellner, Maybe this will help. gsap.registerPlugin(ScrollTrigger); const slides = [...document.querySelectorAll(".slide")]; ScrollTrigger.create({ trigger: ".slides", markers: true, start:'top top', snap: { snapTo: 1 / (slides.length), duration: { min: 0.2, max: 0.6 }, ease: "none" } });

Hello jonias, It is called position paramenter. You can read more about it here.

Hello there, the title is the question and I mean into the forum. I don't know if it exists but i think would be help us.

We often check #gsap, but tagging @GreenSock on Twitter is an even more sure way of making sure we see it

Hey Sanprieto. Good question. We pretty much use CodePen for this, including collections for specific plugins and by hearting pens that use GSAP. We also regularly post inspirational sites and demos on our Twitter account. We'd love it if you (and others) shared more demos with us via Twitter! For more full sites, our curated showcase & showreel is available. I don't think a forum post is a great format for it because it'd be hard to navigate to find relevant demos.

FLIP is pretty new for tutorials, only a few months old. Could be some, but I still don't know about them. As for barba.js you can check out ihatetomatoes. He also have some other nice courses on gsap. https://ihatetomatoes.net/get-barba-101/

It's just a logic issue in your code. Imagine what's happening with the playhead of each of your timelines - when you play(), it starts moving the playhead forward and then when it reaches the end, it completes but if you play() again, the playhead is already at the end, so there's nowhere for it to go. If you restart() or play(0), that would move the playhead back to the start and go from there. In your case, you've got an onComplete on your "out" timeline that correctly sets the "in" playhead back to 0, but you aren't doing anything similar for the "out" timeline, so when its playhead reaches the end, it's done and it never gets set back to 0. I think you could simplify things to this: https://codepen.io/GreenSock/pen/acdb1908b4a5cd53c5db4968ffbdc76a?editors=0010 Notice I'm doing dynamic tweens on each onToggle so that if someone scrolls quickly back and forth, the fade would pick up naturally from wherever it is at that point. Does that clear things up for you?

I think you're looking for clearProps: true. Usage: gsap.set(myTarget, { clearProps: true });.

Thank you Zach, you helped me get there. the final solution is here incase anyone needs it: https://codepen.io/jaykobz/pen/WNodwQX

Hello, If you have an issue when resizing, you should have code that handles resizing. You should also manage your timelines and kill them off before resizing, to avoid pile up. window.onresize = () => { your code } window.addEventListener('resize', () => { your code })

Hey @ZachSaucier, thanks for the answer. For your information I finally managed to fix my issue : I had to add the parenthesis on the ScrollTrigger.update() call. Everything works great now ?

@PointC @ZachSaucier thank you so much for your tips. I really appreciate it! I will look more into MorphSVG and read the article you sent ?

Super helpful, thank you! And glad to see I wasn't Really far off! I'll get transitioned into the new syntax, thanks for that as well. That combined with the motion path solution below is exactly what I was looking for I truly appreciate it! This forum rocks.

Ah, okay, that makes sense. Glad to see you're officially added now as a developer on that "Business Green" account. I shot you an email with the file. Enjoy!

Just FYI. Creating vectors for organic morphing in Adobe Illustrator can sometimes produce less than desirable results. I have an article about how to work around AI's 'helpfulness'. https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/ Happy tweening.

The animation on that website uses WebGL to to give it that sort of effect. But MorphSVG is a great way to make a more simple version of it

Sorry, I'd argue this type of help is really out of scope of what we're able to provide for free in these forums. If you're interested in premium consulting we do offer that in some circumstances. Send us a message if you're interested.

Hey DMIND. Thanks for the clear demo. After looking at your demo I had a guess that the child ScrollTrigger was being created before the scrollerProxy. Adding a delay proved that that guess is correct (or at least it works around whatever issue it's having). I am not very familiar with React, but perhaps there's a more React way of making sure that the necessary JS runs in the correct order?

Hey rubenmeines and welcome to the GreenSock forums. A few notes: You should set all transforms of elements that you animate with GSAP with GSAP. Not doing so is one of the most common GSAP mistakes. In general it's good practice to avoid animating the y position of the element that is used as your trigger. Doing so makes the logic of when to fire events more difficult. This definitely sounds like a webkit rendering bug. Have you tried using will-change: transform on the elements that you're animating? It's always helpful if you create a minimal demo of the issue when posting here. Otherwise we're often guessing as to what the issue is and how to fix it

The short answer: ALWAYS set all your transform-related values via GSAP directly. Don't do a mix of CSS and GSAP. It's one of the most common mistakes - see: Explanation: You set a translateY in your CSS of -75px and the default <video> size in most browsers is 300x150, so -75px is exactly -50% of that height. When GSAP parses the current transforms on an element, the browser always reports them as a matrix() or matrix3d() which is pixel-based but it's extremely common for people to use values like -50% which is why GSAP does its best to sense that condition. If it sees that the current value is precisely 50% (or -50%), it will assume you meant it to be a percentage. Again, it's doing its best to discern things when you haven't set them properly via GSAP directly. So if you simply gsap.set() your transform-related values directly, it'll ensure that GSAP knows exactly what you meant and set those accordingly. So in your case, it could be: gsap.set("video.parallax", {yPercent: 0, y: -75}); It's fine to set them initially via CSS also (to avoid any flash of unstyled content), but definitely set transforms via GSAP on anything you're animating with GSAP. Does that resolve things for you?

Hey Lukas. I answered pretty much this same question yesterday here: Short answer: you need to use the horizontal offset of the sections since they are all positioned at the top of the page: https://codepen.io/GreenSock/pen/jOWvgjV?editors=0010