Leaderboard

woooow Mikel did it again !!!! i would like to thank you alot , i am having hard time with javascript but with all the sample you provided, it s getting better, thanks a lot , i can move forward..or start in fact thanks a lot again .it s time to buy the greensock book for me

Hi @dgu, If you update all necessary variables and functions after each new point, it should work - @OSUblakecould say something concrete. Here only roughly matched Best regards Mikel

how about this

@Sahil Fantastic!, many many tnxs

Hi @dgu, I am not sure if I interpret your question correctly. Could you represent your intention a little more concrete - preferably with a CodePen: What means 'manually ' for you? best regards Mikel

Hi guys, I love using AnimateCC in conjunction with Greensock but the only thing that has always been sort of a headache has been how to animate alpha gradient masks. After some trial and errors creating and animating the mask, here is the file I wanted to share with the community, hopefully it will benefit somebody. One important piece of information that the Adobe Support team shared as well was:"Please avoid adding scripts within the mask and maskee symbols or multiple level of nesting within them because they need to be cached as bitmap for masking to work." AlphaGradientMask_radial.fla.zip

Hi @dgu, If you just change the path (id = "path"), the drag function works as desired. Is this your point "by adding points manually"? Happy dragging ... Mikel

Yep! Thanks Jack!

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?

Yeah, synchronizing multiple staggers like that can be difficult. If I need each element to do multiple steps I find it a bit easier to create a timeline for each element and then put each element's timeline into a main timeline like: You still may have to finesse the durations and offsets to get exactly what you want but I find it easier to work with.

Solved the issue with: var path = document.querySelector(".path"); var redDotXPos = redDot.getBBox().x + redDot.getBBox().width/2; var redDotYPos = redDot.getBBox().y + redDot.getBBox().height/2; var blueDotXPos = blueDot.getBBox().x + blueDot.getBBox().width/2; var blueDotYPos = blueDot.getBBox().y + blueDot.getBBox().height/2; TweenLite.set(path, { x:redDotXPos , y:redDotYPos}); Great product, great forum.... thanks for all you do!

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

This is kind of old but since I just started with a similar project, thought I'd chip in... In React, just put this below your imports & above your react component declaration: const T = TweenLite; // eslint-disable-line , and then in your component use it as T.to() ... etc. = only 1 eslint-disable line.

and also go through a few pages of @OSUblake's public CodePen demos: https://codepen.io/osublake/pens/public/ Lots of spliney stuff in there.

thanks for the quick reply Jack. Right now I've been pasting the code in my actual SVG file and then calling the SVG within <img> tags. It makes much more sense to load it from the HTML. I'll give that a shot and let you know if I have any issues.

Nah, GSAP typically just needs to be loaded once on the web page. In most cases, people inline their SVG (embed it in the HTML) which ensures that it can easily tap into GSAP without any security issues, and there are fewer server requests (faster). Are you trying to embed JS inside each SVG file and loading it into <img> nodes or something? I believe it's possible to load JS into an SVG with a link too (similar to a <script> tag in HTML). It'd help if you had a demo or something we could peek at. But no, it's very unlikely that you'd need to embed TweenMax in a bunch of SVG files. I can't imagine a scenario that'd require that.

Hello @mannycode and welcome to the GreenSock Forum! Looks like you were missing the jQuery JS and the TweenMax JS. You can add those by going to the JS panel. Click on the Gear icon and use the dropdown in codepen to add a JS library. This video tut by the mighty @Carl can help on how to add JS GSAP to your codepen: Happy Tweening!

That looks right to me. Is the trigger element already in view on page load? If you could create a CodePen demo, we'll have a better chance of troubleshooting this for you. Here's some more info about that: https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Here's an empty CodePen that already loads the ScrollMagic and GSAP scripts. You can fork it and drop in your HTML, CSS and JavaScript. http://codepen.io/PointC/pen/wgLJWE/ Just post a link back here when that's ready and we'll take a look for you. Thanks.