Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Samis

Animation repetition

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´m using the simpledemo.html as a reference, and I´m having trouble when trying to use the same animation in two different elements, see code below:

 

 

<div id="examples-1">
<h2 id="fade-it">Fade It</h2>
<h3 id="fade-it">Fade It</h3>
<h2 id="spin-it">Spin It</h2>
<h2 id="scale-it">Scale It</h2>
<h2 id="smush-it">Smush It</h2>
</div>
 
Note that the first <h2> tag and the <h3> tag should both fade in, but it makes the whole file stop working. I know that Ids should not be repeated, but, how can I use Fade in animation more than once in the same file?
 
 
Thanks in advance!
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

It looks like you are referring to the 3rd-party jquery plugin SuperScrollorama.

Using the same ID multiple times is going to cause problems as it is what you use to select unique elements.

 

Your code should look like this:

 

 

<h2 id="fade-it">Fade It</h2>
<h3 id="fade-it2">Fade It</h3>

controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}}));
controller.addTween('#fade-it2', TweenMax.from( $('#fade-it2'), .5, {css:{opacity: 0}}));
 

If you wan to literally re-use an effect, you can create a function that returns a tween like so

 

 

function createMyFade(ID) {
     return TweenMax.from($(ID), .5, {opacity:0});
}


controller.addTween('#fade-it', createMyFade("#fade-it"));
controller.addTween('#fade-it2', createMyFade("#fade-it2")));
 

 

For more detailed help with SuperScrollorama try filing an issue here: https://github.com/johnpolacek/superscrollorama/issues?state=open

 

Let us know if you need any help with the GSAP API.

 

Happy Tweeing!

  • Like 1
Link to comment
Share on other sites

Great! I get it now! Thanks a lot! 

BTW, great tool!

 

Bests

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