Paz Posted April 20, 2021 Share Posted April 20, 2021 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. See the Pen xxgyRom by mar-a (@mar-a) on CodePen Link to comment Share on other sites More sharing options...
Solution Shaun Gorneau Posted April 20, 2021 Solution Share Posted April 20, 2021 Hi @Paz, This is a combination of some initial values, set()s, to()s and from()s; they can come together to create unexpected results because some values are applied before the tween begins. I find in cases with several tweens in a timeline, it's best to use set() up front to establish inital property values, and then use to()s from there. Have a look, See the Pen bGgmqmJ?editors=0010 by sgorneau (@sgorneau) on CodePen 3 Link to comment Share on other sites More sharing options...
Paz Posted April 20, 2021 Author Share Posted April 20, 2021 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now