Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Timeline doesn't adjust for percent when it comes to width/height

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I've been working with Timeline and divs of a 50% width to adjust for window resize. The problem I've encounters is that if you plan on reversing a timeline, it does not recognize that you have resized your divs. I didn't have a good way of showing this in code pen, but this is the site I'm working on: http://heroicdreams.com/test/#servicesportfolio


The two divs that break are the colored backdrops. After it animates in, resize the window then click any link and you can see how it glitches from the beginning of the animation. It only remembers the previous div position, not the new resized one.

Link to comment
Share on other sites

Ok my first guess was that you were mixing units, and yep! you are tweening width between '0px' and '50%'. Try '0%' and '50%' and GSAP will stick to % for the entire tween. If you mix units, it's going to convert the % width to px and tween as px. The px values will be recorded at the start of the tween and are only re-recorded if you invalidate() the tween. If you really need to mix units, you should be able to get them working if you invalidate() the tweens on window resize.


Next time if you can't make a reduced example, just put the whole thing in codepen/jsfiddle etc and link the files to your server. The chances of someone both discovering your issue, and working out a fix for it, is much higher if we don't have to setup the example ourselves... I appreciate that at least you considered it though!


http://codepen.io/jamiejefferson/ (if you want this removed just let me know)


By the way, that's a pretty neat effect you're working on there!

  • Like 2
Link to comment
Share on other sites

Awesome! THanks so much!


Yeah maybe remove it.. Not that it can't be replicated just by looking at the site, but it feels weird being up there.

Link to comment
Share on other sites

Hi HeroicNate,


Just want to jump in and commend you on the animation, its very nice.

Please post back here when your site is live and in the wild. Would love to pass it around.

Link to comment
Share on other sites

Yeah i second Carl on the nice animation and also the cool logo design for the Heroic Dreams logo.. can't wait to see the finished project! :)

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.