Paz

@Cassie Yes I agree that would be the simplest solution, but the person who designed it doesn't like the option of having the animations paused mid-way. @GreenSock Thanks for showing this option. I'll re-do the whole thing, give it another shot and see if it works. But agree it has logical impossibilities! Thank you all for your time.

Hi, Thank you both for your help. The fromTo seems a good option to use here. But I'm afraid I'll need to go through all the animations again. If I add the code suggested, I get unwanted effects on other timelines. Before I continue with this, I would greatly appreciate your opinion. What I'm trying to achieve is that each Headline section triggers a timeline. You can see an example here -down the page-: https://www.blendingpoint.com/about/ I can see that in that example the animations are shorter and abstract, whereas the ones I'm making are possible too long and with a narrative. e.g magnifying glass has to be visible on Step 2 only. So if people scroll down / up too fast the magnifying glass catches-up, and ends up being visible at other points of the scroll. Same with the faces or the lines at the end. I know there's errors in my animation, but I'm unsure if my problem is in the errors I've made or in the design of the animation (too long for scrolling where you cannot control the speed used by the user). Any comments would be immensely appreciated. THANK YOU!

Hiya, I've been working on this animation and have again issues with the autoAlpha. I basically have 3 blue tiles that should disappear on scrolling reverse (screenshot attached), but are still visible. It should be: In Step 1 visible In Step 2 they disappear In Step 3 they appear In Step 4 visible I've tried many different ways but cannot make it work. In my code they are commented as: // 3 blue tiles issue // "#tile6-2", "#tile4-2", "#tile8-2" Also, I fist added durations to and between tweens, but then I realised that since it's a scroll animation the different 'steps' need to happen quite quickly. Is there any general advice for these kind of animations, so I can do things better next time? Any help is appreciated!!

Thank you so much. Even though to, from, and autoAlpha seem pretty straight forward I'm still wrapping my heading around their meaning. It looks much more tidier too.

Hello there, I've been using Gsap for a couple of weeks only. So any help would be much appreciated! I'm doing a logo animation where boxes appear, then scale, and move. (Later I will sync the different stages to sections and a scroll trigger... let's see) Each tile is a group <g> within a container <g> , all wrapped in a div#logo I start the animation setting #logo{visibility:hidden; }, and then toggle with defaults opacity:0 and and tl.from autoAlpha:0. It works, but as soon as I add a stagger animation the scale stops working. Mainly because those svgs remain hidden with opacity 0. You can see what I mean by uncommenting //.from("#items > g", { y:-200, stagger:0.1}) I've tried to add "opacity" to: .from("#Layer_9_green", {opacity:0, scaleX:0, transformOrigin:"50% 50%"}) still with no luck. Many thanks.