Jump to content
Search Community

Duplicate Timeline not working

CappMarvell 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'm experiencing a problem that I don't know how to resolve.

 

I'm trying to reverse the direction of some timeline tweens depending on a variable (swipeDir). If "left", the animation will come from the right, if "right", the animation will come from the left. I figure, I'll copy the function and reverse the numbers (from "+=100" to "-=100").

 

I copied the "left" function - "symptomsBuild", and only changed the name - "symptomsBuild2". The odd thing is that with only a name change, the "SymptomsBuild2" function doesn't work right. Only one or two items animates.

 

(I was unable to get it working in Codepen. However, I did attach an example.)

 

If you change swipeDir to "left" (line 78 in the attached js file), then it calls the SymptomsBuild2 function, and doesn't work.

 

The weird thing is that if I move SymptomsBuild2 higher up in the js, it works, but then SymptomsBuild doesn't work right.

 

Any help would be appreciated.

 

Thanks.

 

Stephen

 

example.zip

Link to comment
Share on other sites

Hello CappMarvell, and welcome to the GreenSock Forum!

 

In your example.zip it is missing a lot of the images so i'm not really sure how the animations are supposed to render? I was unable to test this locally, even in Google Chrome emulating mobile for iPad 4, iPhone 5, or Galaxy 5. No swipe touch was working. I did not see any methods or event handlers in your example.zip that would listen for your swipe left or right.

"NetworkError: 404 Not Found - http://localhost/New-folder/example/z-btn-symptoms-off.png"
z-btn-s...off.png
"NetworkError: 404 Not Found - http://localhost/New-folder/example/c10_1-chart-bg.png"
c10_1-c...-bg.png
"NetworkError: 404 Not Found - http://localhost/New-folder/example/z-sidebar-bullet.png"
z-sideb...let.png
"NetworkError: 404 Not Found - http://localhost/New-folder/example/z-btn-rescue-med-on.png"
z-btn-r...-on.png
"NetworkError: 404 Not Found - http://localhost/New-folder/example/c10_1-sidebar-callout.png"
c10_1-s...out.png

:

I noticed that in your tweens, you are using the delay property in the vars .. as well as the position parameter.

 

Here is a great video tut on the position parameter by GreenSock:

 

http://greensock.com/position-parameter

 

And here is another video tut by GreenSock on basic sequencing tweens with TimelineLite/TimelineMax:

 

http://greensock.com/sequence-video

 

You could also use the set() method when setting your CSS properties, since set() is like using a zero duration (0) tween:

if(swipeDir == "left") {
            if(tabbedSlideState == 'c10TabRescue') {
                TweenLite.set(c10_1_container,  { display:'block'});
                TweenLite.set(c10_2_container,  { display:'none' });

            } else if(tabbedSlideState == 'c10TabSymptom') {
                TweenLite.set(c10_1_container, { display:'none'});
                TweenLite.set(c10_2_container,  { display:'block' });
                
                symptomsBuild.play();
                
            }    
        } else {
            if(tabbedSlideState == 'c10TabRescue') {
                TweenLite.set(c10_1_container,  { display:'block'});
                TweenLite.set(c10_2_container,  { display:'none' });

            } else if(tabbedSlideState == 'c10TabSymptom') {
                TweenLite.set(c10_1_container,  { display:'none'});
                TweenLite.set(c10_2_container,  { display:'block' });
                
                symptomsBuild2.play();
    
            }
        }

:

Notice i converted to() to set() and just omitted the duration parameter

 

You could just try and setup a limited codepen example that just has the GSAP code and the animation your trying to achieve. This way we can better understand the issue you are having.

 

:)

  • Like 1
Link to comment
Share on other sites

Hi,

 

There are some issues with your file and code.

 

First, there's no need to include every GSAP JS files if you're referencing to TweenMax.min.js. You can do so using the CDNJS link. In the same subject you're adding jQuery, point to jQuery's CDN file:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js"></script>

If you can please do the same with the plugins as well.

 

Second, as Jonathan points, there are some files missing in the ZIP, mainly images.

 

Third, your CSS file doesn't have any media queries in it. In which screen size are we supposed to test your file?.

 

Fourth, in your HTML you're not loading the plugins (I assume the swipe plugin and this veeva library file).

 

Finally, what's the main reason you can't create a codepen sample?. You can include more than one JS library in it. I'm pretty sure the plugins have they are online, so you could point to them as well.

 

If you still can't create a codepen sample, please correct those issues and re-upload the file.

 

Rodrigo.

Link to comment
Share on other sites

Thanks for the response. My apologies for the rushed example. Not sure why it wasn't working, but I simplified it down even further to illustrate my issue. And created it in Codepen.

 

See the Pen rEjBl by anon (@anon) on CodePen

 

In the Codepen example, I have two functions that are exactly alike, except in name. If you change the "swipeDir" variable from "left" to "right" (line12), so that it calls the "RescueBuild2" function, you see that the red square no longer moves.

 

If I make the change as above, and move the "RescueBuild2" function from line 8 to line 5, in front of the "RescueBuild" function, the red square moves, however, the "RescueBuild" function no longer works.

 

Thanks.

 

Stephen

Link to comment
Share on other sites

Hi Stephen,

 

Thanks a lot for the reduced sample it was very helpful indeed.

 

The issue here is basically a relative value issue. Long story short, you have two instances pointing to the same object and tweening the same property in that object, also you're using relative values on each instance which is also another issue. So basically you create a first instance that takes the element 900px to the left and set it's opacity to zero. Then you create a second instance that takes the same element another 900px to the left and also sets it's opacity to zero, but the element's opacity is already zero and is already at 900px, so that final instance will take the element to 1800px and opacity 0 and will bring the element to 900px and opacity 0 as well

 

In your case I'm going to presume that you want the element coming from one side or another depending on the user's swipe direction. One options could be to clone the object and give each object a separated instance to avoid the relative value conflict.

 

Another option could be to create the instance based on the swipe direction:

var rescueBuild = new TimelineLite({ paused:true });
    
function load() 
{
  if(swipeDir == "left") 
  {
    //empty the timeline to add the new direction
    rescueBuild.clear();
    rescueBuild.from(c10_1_chart, 1.5, { opacity: 0, left:900, ease:Power2.easeOut }, 0.025);
    rescueBuild.play();
  } else 
  {
    //empty the timeline to add the new direction
    rescueBuild.clear();
    rescueBuild.from(c10_1_chart, 1.5, { opacity: 0, left:-900, ease:Power2.easeOut }, 0.025);
    rescueBuild.play();
  }
}

load();

Also you could add another conditional logic to check if the swipe direction has changed. If it hasn't then there's no need to execute all that code and just restart the timeline.

 

Another option could be to set the element's opacity to zero and visibility:hidden in the CSS, then create a set() instance to position the element according to the swipe direction and then tween the element to left:0:

var rescueBuild = new TimelineLite({ paused:true });

//remember the elements opacity is 0 and visibility is hidden in the CSS
rescueBuild.to(c10_1_chart, 1.5, {autoAlpha:1, left:0, ease:Power2.easeOut }, 0.025);

function load() 
{
  if(swipeDir == "left") 
  {
    //set the element position to the right of the screen
    TweenLite.set(c10_1_chart, {left:900});
    rescueBuild.play();
  } else 
  {
    //set the element to the left of the screen
    TweenLite.set(c10_1_chart, {left:-900});
    rescueBuild.play();
  }
}

load();

Finally another option that I can think of, perhaps other users could come up with better ideas, would be to create fromTo instances based on the code above, in order to force the element come from the left or the right of the screen. Also take a look at xPercent, which is very helpful for responsive design animations:

 

http://greensock.com/gsap-1-13-1

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

OK. That was very helpful! And (your first example) worked perfectly for me.

 

In my browser developer tool, I could see that something was happening with both functions, but was unclear as to what the issue was. I didn't know this issue in other parts of my code because other functions called different objects. This was the first time I had functions calling the same one.

 

And the tip about the relative value helped also.

 

Thanks much!

 

Stephen

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