Jump to content
Search Community

Stop animation from playing when page is already visited

Woohoo 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 all,

I'm pretty new to GSAP and javascript/jquery in general.

This is the case:

I'm developing a website where an animation plays when someone visites the site for the first time (animation is on the homepage).

When navigating the site, and going back to the homepage the animation starts playing again.

I don't want this animation to play again when a visitor is navigating the site.

 

I think this has something to do with cookies or so. But how can I set or use cookies with GSAP to prevent playing this animation.

Link to comment
Share on other sites

Hi @Woohoo :)

 

That falls outside the scope of GSAP, but it sounds like you're looking for info about HTML5 local storage. Here are some links that may help.

 

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

1 hour ago, PointC said:

Hi @Woohoo :)

 

That falls outside the scope of GSAP, but it sounds like you're looking for info about HTML5 local storage. Here are some links that may help.

 

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

 

Happy tweening.

:)

 

 

Thanks for the response and the URL's

 

But I'm afraid that a lot of animators (like me) are just getting used to using GSAP to get things done the way they like it (not having experience with javascript but knowing how to use the Greensock API), and have no or little knowledge of how to get it workable in an almost productive-ready situation, javascript-wise. 

The case I'm describing is a very common situation.

Can't Greensock write a tutorial on how this can be done, instead of providing URL's where the use of cookies and session storage are explained in a way many animators just can't follow or comprehend?

Or maybe a (non Greensock) tutorial that explains a lot about this topic for people that have little knowledge about javascript?

 

Link to comment
Share on other sites

The best JavaScript programmers I know come from a art/design background. In fact, GSAP was a written by a graphic designer, so there's no harm in learning the language. You'll be able to do a lot more with your animations.

 

That said, this is still a complicated question. I guess the biggest question is, for how long should the animation be stopped from playing on a page? A session? A day? A week? Rest of eternity?

 

Regardless, I think the answer will come from the sessionStorage or localStorage urls provided. You can store and retrieve a variable in the browser, so you could store a variable like if the animation has played, or maybe the date it was last played on. The syntax is very easy. 

 

var hasPlayed = sessionStorage.getItem("hasMyAnimationPlayed");
 
if (!hasPlayed) {

  TweenMax.to(foo, 1, {
    x: 100,
    onComplete: function() {
      sessionStorage.setItem("hasMyAnimationPlayed", true);
    }
  });
}

 

  • Like 10
Link to comment
Share on other sites

53 minutes ago, Woohoo said:

But having  no programming background, it is sometimes very hard and frustrating.

 

Totally understandable. Somebody just brought up the same thing here.

https://greensock.com/forums/topic/16172-svg-wave-animation/?tab=comments#comment-81769

 

If you hang around the forums and try to figure out some of the questions, you'll learn a lot. After a while programming won't seem foreign.

 

  • Like 4
Link to comment
Share on other sites

Yup - it can certainly be frustrating when you're just starting out with GSAP and JS. As @OSUblake mentioned, hanging around here will almost certainly add to your knowledge and the language will start making more sense over time.

 

 Regarding your question about non-GreenSock tutorials:

23 hours ago, Woohoo said:

Or maybe a (non Greensock) tutorial that explains a lot about this topic for people that have little knowledge about javascript?

 

That would be nice, but it's a matter of resources. @GreenSock & @Carl take care of the company and monitor the forums. The rest of the Moderators and active members volunteer as much time as we can in the forums because we love the platform and enjoy helping community members. That's why we try to keep the threads & tutorials focused on GSAP questions and problems. 

 

Depending upon your preferred method of learning, there are many resources available. In addition to the obvious books and online tutorials there are a large number of free YouTube channels dedicated to JS. Here's a good list that may be worth bookmarking.

 

https://github.com/andrew--r/channels#english-language 

 

Hopefully that helps a little bit. Happy tweening.

:)

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