mtkramer

I will definitely give it a read. If you saw my app's code, you might have a stroke. I'm sure I butchered it good, especially since it's difficult to click the buttons, especially on small viewports, and long quotes overflow the buttons off the bottom. But I hacked it into passing freecodecamp.org first test for front-end certification after working on this for awhile. Yay! https://codepen.io/mtkramer/pen/OqVpzO

I added gsap 2.1.3 through the pen settings rather than adding a <script> element. Maybe that is the problem...

I'm glad I found this conversation. I was having the same problem when I was transferring an app from VS 2019 community to codepen.io. It worked fine with React and node.js and using MS Edge. But, on codepen.io, I was getting an error in the Chrome console, Type Error: Cannot create property '_gsTweenID' on string '#el' followed by an infinite loop error Uncaught Type Error: Cannot read property 'length' of undefined. After reading this conversation, I solved my issued by creating a jQuery-like function (sorry, I'm still new to coding and haven't delved into jQuery yet): function $(x) { return document.getElementById(x); }; and then changed all of my tween targets from : .to('#el',SPD,{animation:object}) to: .to($('el'),SPD,{animation:object}) The app works like it should now. Thanks again everyone!

As usual, I assumed I knew what yoyo did and looked everywhere else in the docs. Adding repeat to the child timelines fixed the issue. Thanks Mikel!

With some more testing, I think there may be a rendering issue with the animation being played through React. I simplified it to just run the vertical animation on mounting and still no yoyo. It seems that this is a common problem. People have found work-arounds using GSAP as a plugin to scroll magic. I was also considering just hard-coding the yoyo into the child timelines, but I'd rather not

Ok, created a pen and edited the original post. Thankfully and unfortunately, it has the same problem as in my IDE.

Hello, I've been stuck on this problem for a few days now. I have two timelines. Each move dozens of paths that all begin absolutely at 0 seconds and end simultaneously at .35 sec (the duration) and then the timelines are supposed to yoyo. To simplify and reuse code, I put each in their own callable functions vertAni() and horiAni(). My next step is to create a parent animation in a callable function which pushes these two animations together by alternation and the length of the timeline is based on a user defined input (rep). I accomplished this by: https://codepen.io/mtkramer/pen/byEJqX It works well when called with the added .3 sec delay due to the absolute staggering, but the animations don't yoyo back to their own beginnings, they animate tween each other's endpoints. Anybody know a correction or a different approach I could try?