Jump to content
Search Community

Cycled GSAP transforms acting weird (or I'm missing something obvious)

ynamite test
Moderator Tag

Recommended Posts

Hi there

 

Been using GSAP for years, love the library and use it almost daily! It's awesomecakes. This is my very first forum post I believe :)

 

For a project I'm working on I'm using my own quite simple Ken Burns implementation, which works without using timeline. There's probably a much better and more efficient way to code this effect so I'm open to suggestions. I've successfully used this approach in the past (at least in a very similar fashion) and didn't experience the issues I'm having now (see here: https://mikebravo.ch/).

The reason it was working then eludes me. Could be because I was doing something different (CSS maybe? unsure) or it could possibly be an issue with the latest version of GSAP – I was using TweenMax 1.19.1 then. I've experienced these issues in two different browsers, latest Firefox and Safari versions, which leads me to believe that they aren't related to a specific browser.

 

Anyway, as for what the issues actually are, I'm having two (or maybe three) different but possibly related problems.

You'll probably have to watch the animation in the Codepen for a moment to see the issues appear (usually happens within a few seconds though, max. 30 Seconds) :

  1. sometimes, usually within the first few animation cycles, the image being animated is being scaled from 0 up, even though that should never actually occur because the value being scaled from/to should always be higher than 1; the scale values I'm using reflect this fact if printed to console.
  2. sometimes the animation simlpy ends or pauses for 1 or more cycle/s. When it does end it just seems to die completely. I'm not sure whether it would resume if I waited long enough, but I don't think it ever would.
  3. sometimes the image disappears and same as before, the animation ends/hangs up and usually refuses to continue.

I've tried a couple of things:

  1. using fromTo() in place of to()
  2. adding a timeout before the cycle restarts
  3. added killTweensOf($el)
  4. applied the animation to the parent Div, but the same issues occur (which excludes the image itself as the culprit, I think)
  5. tried using parseTransform: true after reading about that on these boards

Any ideas what the issue might be? Am I missing something obvious?

Thanks a lot for any help!

 

See the Pen eYJmwvd by ynamite (@ynamite) on CodePen

Link to comment
Share on other sites

First, gsap has built in random support.

https://greensock.com/docs/v3/GSAP/UtilityMethods/random()

 

Use delayedCall instead of setTimeout. setTimeout is not synced with gsap.

https://greensock.com/docs/v3/GSAP/gsap.delayedCall()

 

Subtracting and adding 0 makes no sense.

var x = Math.random() * (maxOffsetX - 0) + 0;

// Better
var x = Math.random() * maxOffsetX;

 

.toFixed() creates a string. Bad for math.

var sTo = (Math.random() * (scaleTo - 1.00) + 1.00).toFixed(2);

 

Easy random sign.

function randomSign() {
  return Math.random() < 0.5 ? 1 : -1;
}

...

gsap.to($el, { 
  scale: sTo, 
  x: x * randomSign(), 
  y: y * randomSign(), 
  duration: animTime, 
  ease: "power1.inOut", 
  onComplete: start 
});

 

I don't know if this fixes your issues, but it's a start. You should also wait for the image to load before storing its width and height.

 

See the Pen 17cbaea5c2ba927d860d74bf6540a042 by osublake (@osublake) on CodePen

 

 

  • Like 6
Link to comment
Share on other sites

1 hour ago, ynamite said:

sometimes the animation simlpy ends or pauses for 1 or more cycle/s. When it does end it just seems to die completely. I'm not sure whether it would resume if I waited long enough, but I don't think it ever would.

 

If your sTo value is 1.00 or the same as the previous one, then there might not be any animation. Again why using toFixed is a bad idea.

 

  • Like 4
Link to comment
Share on other sites

1 hour ago, ynamite said:

sometimes the image disappears and same as before, the animation ends/hangs up and usually refuses to continue.

 

I didn't see that, but it might be because you are using an image service. Try using a static image.

  • Like 2
Link to comment
Share on other sites

Oh wow, thanks a lot for the fast reply, that seems to have done the trick! :) as you pointed out it was my (old) math that was off. I didn't bother to double check because it seemed to be working correctly before.

By the way, this was just a simplified test case, in reality the script is part of a much larger app with images provided by a CMS, but it seems to work nicely now. 

 

1 hour ago, OSUblake said:

First, gsap has built in random support.
https://greensock.com/docs/v3/GSAP/UtilityMethods/random()
 

Use delayedCall instead of setTimeout. setTimeout is not synced with gsap.

https://greensock.com/docs/v3/GSAP/gsap.delayedCall()

 

 

I missed those, thanks! Very useful.

 

1 hour ago, OSUblake said:

Subtracting and adding 0 makes no sense.


var x = Math.random() * (maxOffsetX - 0) + 0;

// Better
var x = Math.random() * maxOffsetX;

 

 

Yep, that doesn't make a lick of sense and is kinda embarrassing. Copy and pasted it like a moron.

 

1 hour ago, OSUblake said:

.toFixed() creates a string. Bad for math.


var sTo = (Math.random() * (scaleTo - 1.00) + 1.00).toFixed(2);

 

Easy random sign.


function randomSign() {
  return Math.random() < 0.5 ? 1 : -1;
}

...

gsap.to($el, { 
  scale: sTo, 
  x: x * randomSign(), 
  y: y * randomSign(), 
  duration: animTime, 
  ease: "power1.inOut", 
  onComplete: start 
});

 

 

Thanks so much, learnt a lot!

 

1 hour ago, OSUblake said:

 

If your sTo value is 1.00 or the same as the previous one, then there might not be any animation. Again why using toFixed is a bad idea.

 

 

This seems to be exactly what the issue was :)

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