Jump to content
Search Community

Timeline not continuing and various other questions.

rgfx test
Moderator Tag

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

So I was isolating some animation to ask a few questions on best practices. And for some reason my timeline stops at the first tween of ".h2d-c", if I replace with .box it works. No clue whats going on. I must be blind to something. 

 

So after this works my question were as follows:

 

1. I can't use Elastic or Back easing because of timing issues, I wanted to follow the background and have a softer bounce, is what I did the best way to get this done? 

 

2. If I add force3D:true to a element do I have to continue to apply it on each independent tween of that element?

 

3. The h2 tags are creating dark shadows as they animate. I tried using   -webkit-backface-visibility: hidden; . But am still getting "tracers". I am sure this a browser issue, but perhaps there is a solution. windows 7 firefox and chrome. Took a picture just to know I wasn't tripping.  

 

Thanks.

See the Pen gbOpyo by rgfx (@rgfx) on CodePen

Link to comment
Share on other sites

Ah, this was tricky. 

It wasn't totally a JavaScript problem, the HTML and CSS had 2 small yet critical errors:

http://prntscr.com/55quwq

 

1 your div wasn't closing

2 because of the missing dot, the proper styles weren't being applied

 

try this: http://codepen.io/GreenSock/pen/azbvKW?editors=101(i messed with some things while experimenting)

 

force3D only needs to be applied once, it will stay there for all subsequent tweens until you remove it.

  • Like 2
Link to comment
Share on other sites

Oh! I can't believe I didn't look at the html / css.

 

Your solution works for me. I never thought about delay like that before. Game changer.  Would like to have subtle elastic feel for future work. Anyway to get that done without a bunch of tween and expert timing. 

 

Still seeing those tracers aswell,  even with backfaceVisibility:"hidden...

 

Thanks. 

Link to comment
Share on other sites

I tested on my labtop, iphone  and android, and I don't see the tracers, so its me :(

 

Own a decent graphics card(geforce gtx 760) and ips monitor with high refresh rate.

 

Changing colors changes tracing look, sometimes removing it. disabled hardware acceleration didn't do anything, hard to say. 

 

Anyway, certainly a post for the manufacturer

Thanks for letting me know. 

 

tracing.jpg

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...