Leaderboard

Looks like you've just got an error in your code - your querySelector() isn't finding anything because you're missing a "#", thus there's a runtime error being thrown when you try to call cloneNode() on a null object //BAD: document.querySelector('wrapper') //GOOD: document.querySelector('#wrapper'); Does that help?

YAAAAASSS! Thank you so much for the quick response Sahil

It was because you were updating canvas height n width on every frame, though I don't know why it should cause the issue. I also changed the implementation, so instead of using for loop I am using delayedCall and looping through one element at a time.

Ah yes, I get it now! I went the SVG inline in the HTML route as you recommend and it works perfectly now. Thank You!!!!!! My issue was using a custom template in Joomla that treated everything as an element, so I had to build each component as such. For this animated SVG, I just used the HTML element and coded everything inline instead of calling the SVG via an image element.

No no, if you load your SVG as an external asset like that, GSAP can't access the elements inside of it (for security reasons - it's a browser thing). I thought you were trying to embed the SVG inline in the HTML - that's what I'd strongly recommend. It is technically possible to do it as an external asset by either linking to GSAP from within your SVG or just injecting the SVG inline dynamically after it's loaded, but it's easier to just inline it from the start (at least in most cases). If you're still having trouble, it'd be super helpful if you could provide a codepen demo so that we can quickly identify the issue(s). Cheers!

There are a ton of browser inconsistencies and "gotchas" when animating SVG with CSS. For example, transform-origin issues: https://css-tricks.com/svg-animation-on-css-transforms/. There are many, many more that GSAP solves under the hood. Another example, IE and Firefox both have bugs that affect progressively drawing SVG lines, measuring path length, and Safari can leave rendering artifacts in certain cases. I'm curious: why did your client disallow JS for the animations? I'm biased of course, but I think it's a pretty bad tradeoff to dump JS for buggy (and headache-prone, verbose) CSS. Are they concerned about security or something?

No problem at all. Happens to the best of us.

Ah rookie mistake. Thanks Jack.

Hi @anteksiler, Do you want this effect? Best regards Mikel

I used TimelineMax so that each line's animation could repeat on its own (not wait for all animations to finish). Pens should be around for many years.

@Sahil, I just upgraded all the packages in my project and got the same error as you did. When transpiling, typescript would warn about overwriting my .js files. Setting allowJs back to false in tsconfig.json fixed that issue. I don't really know why I needed that particular setting earlier and ran into this issue after upgrading. Maybe a change in the way typescript transpiles JavaScript files...? Anyway, I hope it helps for you!

GSAP has some built-in mechanisms to adjust for lag on-the-fly. Take a look at the videos and info on lagSmoothing() here: https://greensock.com/gsap-1-12-0 If you still have questions or problems, let us know. Unfortunately, there is really only so much you can do to make things look nice while you are hammering the processor.

Old post but incase anyone else finds this through a search, I came across this seed which helped me: https://github.com/devyaz/Nativescript-GsapAnimation- I have found that with NativeScript it's best to experiment with the property type you want to animate.

Hi @mannycode, The code, the CSS and especially the concept of mediaqueries are indeed too complicated. I can only agree with Carl. Here is just a rough implementation of my view of things in the sense of KISS: Keep it simple and stupid! In this sense Mikel

Hey Carl, it's exactly that, good job. I'd like to understand why switching from TimelineLite to TimelineMax does the trick? Another question, are those Pens always available (so then I can check those when I need it), or it's better if I copy them into my own Codepen? Thank you

Sorry, I don't really understand the effect you want. You have like 800 lines of css and I don't understand what the nav should do when you apply the mobile class. It looks to me that its being hidden of screen somewhere. In cases like this the simpler you can make the demo the better. I think in general what you need to do is create the animations that you need when the resize event meets the condition you are testing for, not before. I think you were getting at this with your question. You can't create an animation on page load for something with class of mobile BEFORE that class has been applied. you can do something like this function resize() { if ($window.width() < 768) { mainNav.addClass("mobile"); TweenLite.to("body", 1, {backgroundColor:"white"}) return; } } Or instead of creating a tween or timeline in the resize() function you can call another function that creates the animation function resize() { if ($window.width() < 768) { mainNav.addClass("mobile"); animateNewThings(); return; } } function animateNewThings() { TweenLite.to("body", 1, {backgroundColor:"white"}) TweenLite.to(".mobile", 1, {color:"green}) } If you need more help please describe more of what you need to happen. Thx.

It's probably just a scope issue. Since you're trying to call gotoAndPlay() on the "this" object, it should actually look like: TweenMax.delayedCall(3, this.gotoAndPlay, ["seq2"], this); Does that help?

That dot is a bug there this[ "myInstance" + i ]

can you post a reduced code pen demo with this specific problem? Following is demo that works fine on play and reverse. If you meant, they should stagger on reverse then you can create two separate master timelines for play and reverse. One with label another without label.