Jump to content
Search Community

Is there a callback for when a 'from' tween has finished 'setting the 'from' states?'

Ginger Soul test
Moderator Tag

Recommended Posts

Hey, I’m sure this has been asked before, but I can’t seem to locate a thread about it: I’ve been animating stuff by using a set() tween (to set initial styles, e.g. opacity 0), then executing a to() tween to animate a target (e.g. to a style of opacity 1) when it’s time to do so, based on an event, like scrolling the page. Common 'entry animation' stuff. 

To cut down on the 'double tweening,' I'd like to start using from() tweens for animations that return a target to its 'default state,' but I'd like to avoid a FOUC before the from() call has a chance to do its thing and style the element.


I know I could use CSS to hide the target initially by styling it to match the from()'s properties, but I'd like to instead explore a 'body curtain' of sorts to keep the entire layout from showing until all my from()'s preparations have completed. This would keep the entire animation lifecycle/definition in the JS and allow animations to be added/removed from elements without having to touch markup/CSS - knowing that I could count on the body not showing until everyone was in the right position, even above the fold stuff.

I should mention: I have an animation product built with GSAP (happy BG commercial license holder here) and would like users to be able to just 'attach an animation to something without having to style the target as well.' And I can't stand FOUC and would be willing to make visitors wait a few milliseconds to prepare the scene properly :)

I assume the from() 'does its thing' as soon as possible, but I'm not sure when that is (nor when/if it tells us that it's done 'setting up' with a callback).

I’m willing to accept the 'just style it with CSS' answer if it's not possible to listen for from()'s doings, but I thought I'd ask here first.


Dave Bloom


Link to comment
Share on other sites

Good to see you again!


There will be no difference between from and set, so you're still going to have a FOUC. Setting the initial properties in CSS is usually the easiest solution.


If I want to avoid FOUC with GSAP, I usually hide larger stuff with CSS, like containers or even the body itself, and then I can make a nice fade transition.


See the Pen qBpXobo by GreenSock (@GreenSock) on CodePen


Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...