Leaderboard

Hi, You might want to have a look at this thread, especially the posts by @mvaneijgen and @PointC: Happy Tweening!

Hey @mvaneijgen, Apologies for the late response. But! I can confirm stripping it back did allow me to focus in on problem areas and I managed to solve it via this approach Appreciate the demo you've linked also. I like the perspective effect! One to keep in mind for future builds. Many thanks for the assist.

I have figured out the solution to the first question using a simple function. Now, I will attempt to make it dynamically adaptable to a changing number of divs on the path, and to add a div displaying for the active element. Thank you very much with this help, such a small change and everything now works perfectly. This is the code for the ellipse carousel activated by clicking on some element: https://stackblitz.com/edit/stackblitz-starters-b86qnv?file=src%2Fcomponents%2FroundComponent.js

Thank you for your answer. This really seems to solve my problem, as far as i can see. First test ist positive, the described error is not showing anymore. I hope in deeper tests, this works. But useGSAP seems like a Gamechanger.

Hi, This is mostly a JS logic/selectors issue and not GSAP related. You have this: tlCards.fromTo( '.slideItem', { opacity: 0 }, { opacity: 0.5, duration: 1 } ); You're running that code on iteration of the loop, so on each instance of the loop you're selecting every item with that class, you have to select the corresponding child of that particular accordion item. Here is a fork of my previous demo that selects each <p> tag: https://codepen.io/GreenSock/pen/xxeEjwo Hopefully this helps. Happy Tweening!

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. Below your pen with ScrollTrigger removed and GSDevTools installed, so you can really focus on the animation an make sure it is doing what you want it to do I've just written a guide how to create any cards stacking effect with GSAP (and ScrollTrigger), the most important point is start with all your elements in a known position and start animating from there. In your demo on line 40 you tell it to animate '-=0.3' seconds before the start of the timeline, that seems weird to me. The start is zero, but you tell it the start is -0.3. The property autoAlpha sets the visibility, so no need to also set it in your tween. To make it simple on your self I would create just one timeline and add all the tweens to there, when you think everything is working you can always optimise it later and split it out to separate timelines. https://codepen.io/mvaneijgen/pen/WNWQEWx?editors=0010 The pen below might really help you in your setup, from my post above. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/MWxgQbV

You can set pinnedContainer: '.pin-gallery', to you imageReveal ScrollTrigger. from the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/JjVPZGX?editors=0010

Try this. ? ScrollTrigger.refresh(); See how I'm calling that after changing the height of the content. Same concept for injecting stuff into the DOM. https://codepen.io/GreenSock/pen/jOYzWRr

Again, thanks for assisting with my question! If you're interested in what that pen was working towards, here is a little pen I threw together leveraging GSAP. https://codepen.io/ekfuhrmann/pen/QWvGBjz

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?

Hi @Marina its an issue because stagger needs an array. When your looping through each element and adding the timeline to them individually its still animating but has no siblings to stagger with. gsap.registerPlugin(MotionPathPlugin); let cabezas = document.querySelectorAll('.cabeza'); const r = 6; let tl = gsap.timeline(); tl.to(cabezas, { motionPath: { path: `M ${-r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${r * 2},0z`, }, duration: 5, repeat: -1, ease: 'none', stagger: 0.5, }); Strip it out of the loop and it behaves ... well it staggers

Hey Harshal. It sounds like SplitText fits your needs exactly The page for it has example and documentation on how to use it.

Well with your secret plans you tease me ! May be i wasn't clear enough. It wasn't a question a power, it was a question of... well... of asymmetric easeInOut curve. In a transition, the way of PowerN.easeInOut performs, you always have the same time of acceleration and deceleration. Sometimes it's better when it's not the case. In After Effects a good motion designer, working on speed graph, would always give more acceleration than deceleration because the animation will looks generally more dynamic this way, like a dancer which gives strong impulse and then soft cushioning. So my purpose was about a formula that will offer this opportunity to change the InOut ratio (and not the power ratio, which is also the case but not the main trick). I've been testing performance in CodePen, it seems that FineEase has about the same performance than Power3.easeInOut.getRatio (sometimes x1.3 slower, sometimes x0.7 faster). http://codepen.io/jniac/pen/aNeKaz?editors=1010