Jump to content
Search Community

Greensock Animation Repeat not working properly in loop

Fahim 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

 

I have written a simple code where it picks up data attributes values and does the animation with scrollmagic in a loop.

 

It animate all the path of a particular svg.

 

The problem happens when i am trying to add repeat and repeat delay just in case if the the user wants the animation to repeated. It does repeat but seems there is some problem. console log is also giving some message which i am not able to understand.

 

I intend to write a small script which does animation in syn and asyn manner for all the path based a class.

 

I am not where i am messing

here is code and working url. i am not able to create codepen because there is no cdn for drawsvg plugin

 

if (jQuery(".theo-svg-gsapscroll-s").length > 0) {
    jQuery(".theo-svg-gsapscroll-s").each(function () {
      var svgDiv = jQuery(this),
        mtl = new TimelineMax({            
            repeat: svgDiv.attr('data-t-repeat') || 0,
            repeatDelay: svgDiv.attr('data-t-repeat-delay') || 0
            });
            console.log(svgDiv.attr('data-t-repeat'));
      svgDiv.children('svg').find("path.svganimscroll, rect.svganimscroll, circle.svganimscroll, line.svganimscroll, ellipse.svganimscroll, polyline.svganimscroll, polygone.svganimscroll").each(function (index) {
        var svgPathtoAnimate = this,
          controller = new ScrollMagic.Controller(),
          tweenSvg = new TimelineMax()
            .add(mtl.from(svgPathtoAnimate, jQuery(this).parents(".theo-svg-gsapscroll-s").attr('data-t-duration') || 0.5, {
              drawSVG: "100% 100%",
              x: jQuery(this).parents(".theo-svg-gsapscroll-s").attr('data-t-x'),
              scale: jQuery(this).parents(".theo-svg-gsapscroll-s").attr('data-t-scale'),
              y: jQuery(this).parents(".theo-svg-gsapscroll-s").attr('data-t-y'),
              rotation: jQuery(this).parents(".theo-svg-gsapscroll-s").attr('data-t-rotation'),
              ease: jQuery(this).parents(".theo-svg-gsapscroll-s").attr('data-t-ease') || "Linear.ease"
            }));
        //console.log("svgPathtoAnimate " + svgPathtoAnimate + "  index " + [index]);
        var scene = new ScrollMagic.Scene({
            triggerElement: svgPathtoAnimate,
            triggerHook: 'onEnter'
          })
            .setTween(mtl)
            .addTo(controller)
            .addIndicators();
      });
    });
  }
    if (jQuery(".theo-svg-gsapscroll-a").length > 0) {
    jQuery(".theo-svg-gsapscroll-a").children('svg').find("path.svganimscroll, rect.svganimscroll, circle.svganimscroll, line.svganimscroll, ellipse.svganimscroll, polyline.svganimscroll, polygone.svganimscroll").each(function() {
      var svgPathtoAnimate = this;
      var controller = new ScrollMagic.Controller();
      var tweenSvg = new TimelineMax({
            repeat: jQuery(this).parents(".theo-svg-gsapscroll-a").attr('data-t-repeat') || 0,
            repeatDelay: jQuery(this).parents(".theo-svg-gsapscroll-a").attr('data-t-repeat-delay') || 0
        })
        .from(svgPathtoAnimate, jQuery(this).parents(".theo-svg-gsapscroll-a").attr('data-t-duration') || 0.5, {
          drawSVG: "100% 100%",
          x: jQuery(this).parents(".theo-svg-gsapscroll-a").attr('data-t-x') || 0,
          scale: jQuery(this).parents(".theo-svg-gsapscroll-a").attr('data-t-scale') || 0,
          y: jQuery(this).parents(".theo-svg-gsapscroll-a").attr('data-t-y') || 0,
          rotation: jQuery(this).parents(".theo-svg-gsapscroll-a").attr('data-t-rotation') || 0,
          ease: jQuery(this).parents(".theo-svg-gsapscroll-a").attr('data-t-ease') || "Linear.ease"
        });

      var scene = new ScrollMagic.Scene({
          triggerElement: svgPathtoAnimate,
          triggerHook: 'onEnter'
        })
        .setTween(tweenSvg)
        .addTo(controller)
        .addIndicators();
    });
  }

 

 

See the Pen by theo-h (@theo-h) on CodePen

Link to comment
Share on other sites

Hi Fahim,

 

Please use this link in Codepen for the SVG plugin:

 

http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12

 

For some reason the timeline is getting a -1 repeat which creates an endless loop, while the value passed to the console is 2 (the one in the data attr of the DOM elements). Have you tried a console.log on the timeline to see what's in it?. Finally have you tested the animations without ScrollMagic or any other plugins, just GSAP?.

  • Like 3
Link to comment
Share on other sites

Just to echo Rodrigos excellent suggestion, a reduced test case with minimal svg markup and javascript in CodePen would be very helpful. 

Start with no ScrollMagic. 

 

Use that DrawSVG link Rodrigo gave you or just fork any of our CodePen demos: http://codepen.io/collection/DYmKKD/

 

Regarding the duration() of the timeline, keep in mind

 

duration() is the amount of time to play one iteration of the animation

totalDuration() will give you the amount of time to play through all iterations including all repeatDelays.

  • Like 1
Link to comment
Share on other sites

Hi Carl and Rodrigo,

 

 

Here is my codepen as reduce test case scenario but this is not working at all.

 

See the Pen LpYmVW by osricmacon (@osricmacon) on CodePen

See the Pen medLwK by osricmacon (@osricmacon) on CodePen

 

Seems the code is not working at all.

 

I don't know what else to do.

 

If its solved thanks else also thanks.

 

Thanks,

Fahim

Link to comment
Share on other sites

Hi,

 

In both samples you have errors in your selectors. In the second loop you have this:

svgDiv.children('svg').find("path.svganimscroll, rect.svganimscroll, circle.svganimscroll, line.svganimscroll, ellipse.svganimscroll, polyline.svganimscroll, polygone.svganimscroll").each(function(index){

  //code

});

But in your HTML the class is svganimpath, so changing that in the loop works:

svgDiv.children('svg').find("path.svganimpath, rect.svganimpath, circle.svganimpath, line.svganimpath, ellipse.svganimpath, polyline.svganimpath, polygone.svganimpath").each(function(index){

  //code

});

And it does the initial animation, plus two repeats.

 

In the second sample, the one with ScrollMagic, the second loop runs only once until it finds this code:

.setTween(mtl)
.addTo(controller);

This is throwing the following error:

 

Uncaught TypeError: (intermediate value).setTween is not a function

 

Now that basically means that there's something wrong with your ScrollMagic setup and I don't know the first thing about that particular plugin. Perhaps another user could chime in and give some pointers or you could consult ScrollMagic's docs to find out what could be happening.

 

Finally I couldn't avoid to smile when I read this:

 

If its solved thanks else also thanks.

 

Thanks,

Fahim

Immediately this came to my mind:

var thanks;

if (solved) {
  thanks = "Thank You!!";
} else {
  thanks = "Thank You Anyway!!";
}

return thanks + ",<br>Fahim";

:geek:  :geek:

  • Like 5
Link to comment
Share on other sites

Great work Rodrigo,

I got as far as testing that one of the each() loops wasn't doing anything.

It seems you narrowed it down to the exact reason. 

 

Unfortunately, I also don't know much about troubleshooting the ScrollMagic side of this either.

Link to comment
Share on other sites

See the Pen medLwK by osricmacon (@osricmacon) on CodePen

 

The above pen is update to exact my code.

 

I messed up the class because i was using for click and hover which works fine.

 

I am also using scrollto plugin of yours.

 

The stupid and annoying for me is i can see everything fine on local but it dies on codepen

 

The above pen works for first svg but dies for others

 

Really guys thank you i have never seen such a helpful support team specifically for a new person like me.

Link to comment
Share on other sites

Its working fine as far as loop is concerned. The moment the svg has more than one path then it goes in some heavy looping. Seems my looping is flawed or something. I will mark it resolved and close this.

Thanks Carl and Rodrigo for your time.

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