Jump to content
Search Community

Animation should stop or restart

mikel test
Moderator Tag

Go to solution Solved by Carl,

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 Greensock,

 

I´m fascinated of Greensock and tinkering an animated website.

As a follower I try copy and paste, combinig this and that.

Most of the functions are really fine and I´m happy.

 

The "Skizzen" animation runs well but it has to be stopped or restart

when user comes back from another part of this web.

Intro animation could be stopped by "kill" (nice word).

 

Please have a look: www.trans-rapido.de/magnus05

 

Another little problem: NavDots doesn´t work.

 

It would be great if you could give an advice which is traceable for me.

 

Best regards from Hamburg

 

Manfred

Link to comment
Share on other sites

Hi Manfred and welcome to the GreenSock forums.

 

I'm not completely sure of what is not working in the site you mention in your post.

When the site is loaded the main container loads your client's name and then some paintings and text. Then if I click on any of the elements in the bottom-left other stuff appears in the container. And then if I click on Magnus Weidemann, the initial animation happens in the same way it did on page load.

 

Finally I simply don't know what NavDots are, so I can't help you there neither.

 

Please check this post in order to know how to create a reduced live sample in codepen, that clearly demonstrates the issues you're experiencing right now, because is very hard to know looking at the live site without clear information of which animation should stopped/restarted and how, and what other elements are not working as you expect:

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.

Link to comment
Share on other sites

Hi,

 

Sorry - please have a look to "Arbeiten" and open "Skizzen", go back to "Skizzen": it seems that 2 tweens are running.

 

The NavDots are the listed squares upon this image slider to nav to a certain Image.

 

Best regards

Manfred

Link to comment
Share on other sites

Ok, that's more clear.

 

It seems like you're creating a new instance everytime the user clicks on Skizzen, right?. If so what you could do is kill() that animation when a click in any other button is detected:

var skizzenTween = new TimelineLite();//assuming you're working with timeline

$("#button").click(function()
{
  skizzenTween.kill();
});

Like that the next time the user goes back to skizzen a new instance will be created and won't have any other running.

 

Although my advice would be to use a simpler approach, take a look at this:

 

See the Pen CeDkc?editors=001 by rhernando (@rhernando) on CodePen

 

Is based on a codepen by Chrysto:

 

See the Pen LckBh by bassta (@bassta) on CodePen

 

The idea would be to stop the timer function when the user clicks on any button or link and start it again when the user goes back. As you see is far simpler and uses very little code.

 

Finally if this doesn't work, please create a codepen reduced sample, because we can't test or edit a live site.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

var skizzen = new TimelineMax();
$(".skizzenButton").on("click", function() {
skizzen.to(".ausblenden", 0, {autoAlpha: 0})
.to(fondGrau, 0, {bottom: 30})
.to(z, 1, {autoAlpha: 1}, "+=0.5")
.to([vita, arbeiten], 0, {borderTop: "none"})
.to(aktuell, 0, {borderTop: "1px solid #356d33"})
			
// ImageSlider  ====================================================

Hi,

 

Thanks for your recommendation. I tried it: codepen.io/mikeK/pen/qEnKy

If I could have delay between fadeIn and fadeOut it looks nice.

 

The Image slider I´m using is based on codepen.io/rich770/pen/AGipB

On codepen my test is ok:  codepen.io/mikeK/pen/vcfdj

But integrated in my web the navdots are not active.

 

The key part is if you leave section SKIZZEN, go to VITA and come back.

Then the animation has the problem.

How can I integrate that in a codepen?

 

 

 

Best regards

Manfred

Link to comment
Share on other sites

Like Rodrigo, I am having difficulty understanding the problem and especially offering a solution by only visiting the live site. The CodePen is a step in the right direction, but I'm not so sure it replicates the issue. 

 

You don't need to re-build your entire site in CodePen, just enough to have a button that the user would press when they navigate away to another section. It seems the issue has to do with properly pausing the image slider timeline when you visit another section of the website.

 

I'm guessing a good deal of the problems could come from the fact that each time you click a button you are adding NEW tweens to the end of an existing timeline

 

var skizzen = new TimelineMax();
$(".skizzenButton").on("click", function() {
            skizzen.to(".ausblenden", 0, {autoAlpha: 0})
            .to(fondGrau, 0, {bottom: 30})
            .to(z, 1, {autoAlpha: 1}, "+=0.5")
.to([vita, arbeiten], 0, {borderTop: "none"})
            .to(aktuell, 0, {borderTop: "1px solid #356d33"})

If you click that button 3 times it will add 15 tweens to the skizzen timeline! Imagine if it played from start to finish... the entire sequence would repeat 3 times.

 

In some situations it is appropriate to simply build the timeline once and restart() it when needed. 

 

Perhaps you could try setting the time to 0 and clearing the timeline (removing all tweens)

 

var skizzen = new TimelineMax();
$(".skizzenButton").on("click", function() {
           skizzen.time(0).clear();
            skizzen.to(".ausblenden", 0, {autoAlpha: 0})
            .to(fondGrau, 0, {bottom: 30})
            .to(z, 1, {autoAlpha: 1}, "+=0.5")
.to([vita, arbeiten], 0, {borderTop: "none"})
            .to(aktuell, 0, {borderTop: "1px solid #356d33"})
 
Again, without a live sample the quality and accuracy of our suggestions is quite limited.
  • Like 1
Link to comment
Share on other sites

Hi,

 

Thanks for  pressure me to excecute a CodePen. It helps to clean "brain" and strukture.

 

I prepared two versions:

 

1) codepen.io/mikeK/pen/JFLdi

includes actual image slider (problem navdots/menudots not active)

 

2) codepen.io/mikeK/pen/xwdCr

includes image slider based on recommended SimpleSlider

 

Main point: My web layout arranges different sections/pages by tweens.

Clicking through menu runs proper: Setting all(.ausblende) to autoAlpha:0 works.

 

Except page "Skizzen": an image slider should run endless until you leave this page.

How to stop when leaving? Now if you leave and come back the tween seems to run

parallel offset (?).

 

Regarding the image slider: If SimpleSlider would pause between fadeIn and fadeOut

(better look for different image heights) I would prefer this one.

 

I hope that excise and explantion is helpful to understand.

 

Best regards

Mandfred

Link to comment
Share on other sites

  • Solution

Thanks for the CodePen demos. Certainly helpful. They exposed a few problems. I focused on the first one only.

 

The most trouble-some problem was that ALL your code for creating the image slider was inside the click function for skizzen.

This means every time the skizzen button was clicked a new image slider was being generated.

 

I edited the pen so that the image slide is built once on page load and the skizzen button only does:

 

var skizzen = new TimelineMax({});
$(".skizzenButton").on("click", function() {
            skizzen.to(".ausblenden", 0, {autoAlpha: 0})
            .to(z, 1, {autoAlpha: 1}, "+=0.5")
  tl.resume(); //resume the slider
});

 

http://codepen.io/GreenSock/pen/414b706dd82f79046d706e60e149f706/

 

Another issue was that you were defining your tl var (for the image slider timeline) to late in your code so this made it difficult for other buttons / code to reference it.  So I moved the image slider variable declarations to the top of the code.

 

In the code pen above I wired up the Magnus button to illustrate how the image slider timeline can be paused.

 

Do this

 

  1. Freshly load: http://codepen.io/GreenSock/pen/414b706dd82f79046d706e60e149f706/
  2. click on Arbeiten > skizzen
  3. watch image slider until image 2 shows up
  4. click Magnus button
  5. notice that image slider is paused while other content is "half-faded" on top
  6. go back to Arbeiten > skizzen
  7. notice that image slider resumes playback from slide 2 without error
  8. repeat steps 4 - 7

you can now pause the slideshow from any button by adding tl.pause();

  • Like 4
Link to comment
Share on other sites

Hi Carl,

 

Thanks a lot. The slider tween is now "repressed".

CodePen works:

See the Pen JFLdi by mikeK (@mikeK) on CodePen

And also my revised web.

Following your forked CodePen it was a pleasure to learn and to succed.

 

Only one point: The "navdots" for the slider are active in CodePen, but not on my site.

Dom, css, js are 99,9% identical. Do you have a hint?

 

Best regards from Hamburg

Manfred

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