Jump to content
Search Community

Tremor yoyo: true repeat: -1

Mgonzales 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

Hi and welcome to the forums.

 

What is exactly the problem your facing?, using as reference the code in your fiddle everything seems to work as it should:

$( function(){
var rodillo = $('#rodillo');	
var tm = new TimelineMax({repeat:-1, yoyo:true, paused:true});

tm
    .to(rodillo,1.5,{ autoAlpha:0.7,y:'5px',scale:'1'})
    .to(rodillo,1.5,{autoAlpha:1,y:'-5px',scale:'1.5'});
    
function playrodillo()
{
    tm.play();     
}
playrodillo();

});

The image rodillo is static and it's opacity is 1. When the timeline starts it goes down 5px and it's opacity goes to 0.7. Then the element is scaled to 1.5 in both dimensions, it's opacity goes to 1 and goes up 5px. On reverse is the same process but backwards: scales to 1, opacity to 0.7 and down 5px; then opacity to 1 and up 5px.

 

It would help if you could tell us what behaviour you're after in order to see the code you'd need.

 

Hope this helps,

Rodrigo.

Link to comment
Share on other sites

Thanks for your answer.

 

Everything works fine but if you look closely when the image becomes the first tween low then rises according to schedule, but is in the next cycle of the animation that is a slight temblorcillo, like restarting the yoyo: true, repeat : -1 make an effect occurs as climbing a ladder, I hope you can understand this, ie an animation does it well the next with that strange movement.

 

regards

Link to comment
Share on other sites

Hi,

 

You mean this behaviour not being totally smooth?:

 

http://jsfiddle.net/7NwMN/3/

 

Jack already thought about this with force3D:true, that should give you a more smooth animation, like this:

$( function(){
var rodillo = $('#rodillo');	
var tm = new TimelineMax({repeat:-1, yoyo:true, paused:true});

tm
    .to(rodillo,1.5,{ autoAlpha:0.7,y:'5px',scale:'1', force3D:true})
    .to(rodillo,1.5,{autoAlpha:1,y:'-5px',scale:'1.5'});
    
function playrodillo()
{
    tm.play();     
}
playrodillo();

});

Hope this helps,

Rodrigo.

Link to comment
Share on other sites

hi,

thanks for your response, the effect of tremor in the animation pair disappeared, but not IE10 or less, according to http://www.zdnet.com/web-browser-war-the-early-2013-report-7000013354 /, ie is used by over half the world, this is a reality, according to Netmarketshare, otherwise by statcounter, because the way to get the information from both is different, most people use ie, but used q I use firefox crhome or longer, remember that web applications are generic, cross-platform, and can not tell a visitor uses this and this not, if we did that better we are dedicated to making native apps, I think I extended something.

 

Best regards.

Link to comment
Share on other sites

Hi,

 

Yep, like Carl said once, that's IE choking on it's own mess, but has nothing to do with GSAP.

 

Unfortunately each browser has it's own rendering peculiarities, with IE at the top of that list and the engine has quite some hacks and turns in order to deliver the best possible result for each CSS property that animates, but sadly at a certain point of some developments differences has to be made between one browser and the rest, that's the beauty of feature detection and conditional loading, is not like flash but it allows us to give the best result for each particular browser scenario out there.

 

Best,

Rodrigo.

  • 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.
×
×
  • Create New...