Leaderboard

Sorry - I'm not following, but you don't need to put the intro and the scrubbed progress timeline on the same parent. In your revised demo you have: .add(items(), '<'); which adds that at the start of the previous animation. Did you mean to have it start after the intro? More details would be helpful as I'm just not understanding the desired outcome.

Hi @rohit111AAA welcome to the forum! I've split your question to its own topic, from here Due to the way you set up your animations (especially your CSS how you start with things) everything loses their starting points and gets all jumbled up. There are certain properties you are better of not animating for instance width, height, top, bottom, left, right, if you need those there are always better properties to use first x, y, scale, eg all the transform properties in CSS. I've written a guide for this exact use case stacking some cards, it goes over the basic setup how to start with CSS and lay the cards out so that we know where they are on page load. Check it out: And here one of the demos that lays the cards out in a stacking fashion. If you still need help please try and reduce your minimal demo, there are over 200 lines of CSS and HTML, we just need the bare minimum to see the issue, so please don't include your whole project. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/zYbZQML?editors=0010

I was struggling finding out the proper way of specifying the target for gsap, but your example shows exactly how to do it! Thanks, that was very helpful!

That's because you're altering the overflow first, which effectively moves everything, and THEN you're hit-testing, thus it has already shifted at that point. It's just a logic thing. Move your code so that it executes in the proper order to avoid that: https://stackblitz.com/edit/gsap-react-basic-f48716-2x3xdu?file=src%2FBoxItem.js

Hi @banhmi Welcome to the forum. The line drawing is super easy with DrawSVG and a properly prepared SVG file. The tapered strokes are a bit more difficult. You'll need to use masks and possibly multiple elements to pull that off. I have a tutorial that may give you some ideas. https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ Happy tweening and welcome aboard.

Hi @michael_feh Welcome to the forum. We've had a few threads about that effect and you're correct - it's pretty easy with SplitText. Here are a couple demos I posted as answers for one of the older threads. They should point you in the right direction. https://codepen.io/PointC/pen/MWQJWqJ https://codepen.io/PointC/pen/NWybQow Happy tweening and welcome aboard.

I'd probably place the main timeline on a parent and tween the progress() or time() with my ScrollTrigger. Maybe something like this: https://codepen.io/PointC/pen/eYXWzNK/f0c829a8060479b0a65459094ce4c5dc Happy tweening.

ça peut réellement être intéressant 🤔

Welcome to the forums, @Tuna What you're asking for requires custom logic that's beyond the scope of help we can provide in these forums, but the basic idea would be: Create a timeline and attach your ScrollTrigger to that (instead of the simple tween you've got). Put the tween into that timeline, and give it a duration of 1 to make it easy. Calculate the total amount you're moving things (the y that you've already got in your demo). Based on each element's distance from the top of their containing element (the one getting pinned), calculate the proportion of the y movement that it represents. Use that to place a callback on the timeline. For example, if it's 20% of the total y movement, you'd do: tl.add(() => { if (tl.scrollTrigger.direction > 0) { console.log("onEnter"); } else { console.log("onLeaveBack"); } }, 0.2) // <-- position parameter, insert at 0.2 because the whole tween is 1 Check the direction of the timeline's scrollTrigger to determine if it's an onEnter or onLeaveBack and code it accordingly. That's the general idea off the top of my head. Good luck!

This was a bug that'd only happen if the starting position landed exactly on top of one of the anchor points on the path **and** it was looping around all the way, but it should be fixed in the next release which you can preview at: https://assets.codepen.io/16327/MotionPathPlugin.min.js (you might need to clear your cache).

Here's an option using timelines: https://codepen.io/ryan_labar/pen/NWJpXJW?editors=0010 There's some timing issues in my super-quick example, but those should be pretty easy to straighten out.

Sounds like a good use case for the pluckRandomFrom helper function. https://gsap.com/docs/v3/HelperFunctions/helpers/pluckRandomFrom

repeatRefresh: true, doesn't refresh staggers. But I've used @ryan_labar function and in onComplete of the tween just call the same function again, which then views it as a new function and recalculates the function. https://codepen.io/mvaneijgen/pen/ZEPeeXQ?editors=0010

One of the answer I found in the forum while searching for the animation I like is to use Observer. Now I don't know how to start or where to begin specially with importing it. I tried import { Observer } from "gsap/Observer"; gsap.registerPlugin(Observer); but it says that its not defined or can't find the class Observer. How do I use this? I saw one post saying I need to use Reactjs or start looking for React. But we are not using Reactjs. We are only using Drupal Twig Template and simple HTML. How can I use this plugin? Can someone share any useful link I can follow? Thanks in advance