Jump to content
Search Community

Confusing End State of Animation made null

pauljohnknight 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

I have a site where I have some elements in my style sheet that are set to opacity: 0 and translateX(0), these then animate with a TimelineMax (called sectionThreeIn)  '.to' tween and scale up to opacity: 1 and translateX(1) which is all fine.

 

I want to turn these animations off on mobile, so i've done a simple if statement:

 

if (window.innerWidth < 768) {

  sectionThreeIn = null;

}

 

Because the animations only fire once I'm not bothered about doing any window resize events for desktop window sizes.

 

The above if statement prevents the animations from firing on screens below this size, which is great.

 

AREA OF CONFUSION

I went into my CSS to add some media queries that change the opacity and transform values both to 1 for screens below 768px now the animations are turned off for the smaller screen sizes, so the elements don't effectively render invisible on mobile/iPad.
 

But even without me doing this the elements are rendering as visible when I refresh the page (and clear the cache) on smaller screen sizes.  

 

This is confusing the life out of me.  

 

When i turn the if statement off, the CSS behaves as you'd expect, when I turn it on the end state of the animation is being implemented on small screens, but without the animation happening.

 

Ironically what is happening is the end result I'm after, but I don't understand how this can possibly happen? 

 

If you make a timeline null, does it render as a completed animation, but without the actual animation happening?

 

Also two of the three elements are using the CSS rule plugin - so I could recreate the issue on codepen, but I don't how to load the Greensock plugins (apart from TweenMax) onto a codepen pen?

 

At present the site is on a localhost setup.

 

I'm very confused.

Link to comment
Share on other sites

Yeah, a codepen would be super helpful. If you need to link to any of the plugins that aren't included in TweenMax, just click the "download GSAP" button on the home page (or anywhere) and click the "customize" radio button. Select whatever plugins you want, and you'll see the resulting CDN links. 

 

http://d.pr/i/oYEtGh

 

It sounds like you were under the impression that setting a variable to null which had previously pointed to a TimelineMax would somehow make it not run, but that's not true at all. That merely changes what a variable points to. It has nothing to do with GSAP - that's just how JavaScript (and all programming languages) work, as far as I know. 

 

If you want to kill a timeline, you could do: 

if (window.innerWidth < 768) {
  sectionThreeIn.kill(); 
}

 

Does that help at all? 

 

I'd probably just not create the timeline at all in the first place if you don't need it. Like, wrap the entire code block in that if() statement. Just a thought. 

  • Like 3
Link to comment
Share on other sites

Thanks Jack. I get it now.  I ended up just doing an if / else statement with some slightly different tweaks to the timeline as part of the else part if that makes sense.  I understand the difference between null and .kill now though.

Much appreciated,

 

Paul.

 

P.S You should add a 'solved' option to the replies, it'd probably mean you'd get less questions because people could sort by solved.

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