Jump to content
GreenSock

BONOMITE

display non to block mis-aligning animated elements?!?!

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

Desktop: 

Mobile: 

See the Pen cc2f9f170ddc50f86379dfea2c7b0700?editors=0010 by sirhclluk (@sirhclluk) on CodePen

 

 

Video: https://drive.google.com/open?id=1QJ7McwclhKQTCZCCvOlblWf6m_kgdGWs

 

Hey Jack, hope you ca help me out here. Kind of lost on this one. Video above explains it all. In short, coming in and out of display:none while the animation is playing messes with the alignment of the text. Very odd. Thanks.

 

-Thomas

See the Pen e95c773ffbba22f5a575b4d319faac9e by sirhclluk (@sirhclluk) on CodePen

Link to comment
Share on other sites

Hello @BONOMITE and welcome to the GreenSock forum!

 

When i look at both codepen examples above i do not see display none or block used at all?

 

And when i try to view your ent.box.com video it goes to a log in screen. So a person will need to log in or register to see the video which most people wont do, for times sake.

 

Can you please describe the specific issue your having so we can understand what your seeing and what is happening in your code example?

 

Thanks :)

  • Like 2
Link to comment
Share on other sites

I have updated the video Link. Sorry. The codepen links are the individual animations that are in a site that is being hidden and shown... the video explains it all... the links is working now... just checked. Thanks.

 

Link to comment
Share on other sites

Thanks for allowing us to view the video ;)

 

Do you have a screenshot or example of the 2 elements your display block and none on. Or a tree markup so we can see context of both mobile and desktop in the DOM.. Because it will be hard to debug on what might be happening.

 

Also are you using 768px as your break point from desktop to mobile. Also what are using to swap display block and none, A resize event. And if so are you throttling and or debouncing the resize event so its not changing the bootstrap classes multiple times  due to how the resize event fire multiple times within a second.

 

:0

  • Like 2
Link to comment
Share on other sites

Screen shot of the HTML : https://monosnap.com/file/Rw5LDVLPmXzlbID2HvEulaxcMXmLpy

 

I'm using bootstrap classes highlighted in the red squares to hide and show. 768px is the break point. No throttle or debounce being used. 

 

If I have them both showing...  and never hiding... I get no errors... its something about hiding them that is messing with it... 

Link to comment
Share on other sites

I don't have much time right now to look into this, but I wanted to mention a couple of ideas:

  1. Are you using the latest version of GSAP? It looks like you've got a bunch of attribute transforms on the SVGs, some of which include rotate() which wasn't parsable in old versions of GSAP. 
  2. Have you tried forcing your timelines to the end and back again to the beginning, just to force the recording of the start/end values? I noticed you're doing a lot of from() tweens (which is fine) but those can sometimes catch people with logic issues because they use the CURRENT values as the destination ones but sometimes people have logic built on rollovers or something else that's very dynamic. So, for example, if the user clicks quickly, and a from() tween is fired in the middle of another tween, the current values are locked in mid-way (not a GSAP problem at all - it's just a logic thing). So, for example, if you create your timelines and then do something like tl.progress(1).progress(0), it forces it to the end (triggering all the tweens to record starting/ending values) and then back again. Worth a shot in your scenario. 

Let us know if either of those help. 

  • Like 3
Link to comment
Share on other sites

Thanks Jack. Always super helpful! I've passed this along to the animator on this project. I'll let you know how it goes! :-D You rock!

  • Like 1
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.
×