Leaderboard

That effect is not easy. Do you know any WebGL or related libraries like PixiJS or Three.js? If not, you should first get an understanding of the rendering process. Maybe start out with something simple like animating a displacement map. PixiJS transitions... three.js transitions... https://tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects/

If you're talking about the files it's because Draggable also needs the CSSPlugin, which isn't bundled with TweenLite.

Hi @jimmymik, In addition to the hint from Sahil, I would say that a simple animation is easier to realize with inline SVGs. No background image is required for your example. Otherwise, I recommend the work and tutorials by Chris Gannon: a tutorial an article and my favorite Happy tweening ... Mikel

GSAP is an animation engine. The only thing it's designed to do is change numbers over time. It can animate text around your spherical object, but you'd have to create those objects first using a 3D renderer like three.js.

Hi and welcome to the GreenSock forums I wasn't exactly sure what you are asking but if you want to have an element that you want to drag (up and down) and also rotate please consult the demo below from our friend @Diaco I had to fork his original to add an updated version of GSAP and set allowEventDefault:true (to allow the mousedown events). The basic idea is that you have 2 Draggable instances and you toggle their enabled state In the future its best to write actual JS (as opposed to coffeescript) so that more people can make sense of what you are trying to do.

Hi Keith, Welcome to the GreenSock forums and Club GreenSock! Putting the bonus plugins on a CDN where anyone could freely use them would remove one of the primary reasons for joining Club GreenSock, the very thing that enables ongoing support and development. You can host the bonus plugins on your site just as you would other JavaScript files. Let us know if you have any more questions.

You'll need to use WebGL for a depth map. Here's a pretty neat depth editor that uses PixiJS. http://depthy.me/#/ It's open source, so have at it. https://github.com/panrafal/depthy They use some custom filters, which would probably need to be updated to work with the latest version of PixiJS. https://github.com/panrafal/depthy/tree/master/app/scripts/pixi I think three.js can do something similar using a MeshDepthMaterial. https://threejs.org/docs/#api/materials/MeshDepthMaterial

Hi @craigib Welcome to the forum. The short answer is no. The morphSVG plugin works path to path so if you morphed those two into the circle they would each morph into their own circle. Probably not what you want. You can fake it though. At the end of the timeline you can hide the two paths that draw your square and swap in a new square which could be morphed into a circle. Something like this: Hopefully that helps. Happy tweening.

Don't animate transform as it will undo the matrix. Hint, a matrix does rotation using scale and skew, which explains the weird behavior. TweenMax.to('#wheel', 1, { rotation: rotateDeg }); But I don't know if that is the correct behavior. You can rotate something more than 360 degrees... and it can be negative. You might want to look at the DirectionalRotationPlugin, which is baked into the CSSPlugin. https://greensock.com/docs/Plugins/DirectionalRotationPlugin This will rotate it the shortest distance. TweenMax.to('#wheel', 1, { rotation: rotateDeg + "_short" });

ha! I was just coming back to this thread to edit my post and add that link after I remembered the new pen. Doh! It's early on the West Coast and my caffeine hasn't kicked in yet.

This may be an even better link to keep on hand: https://codepen.io/GreenSock/full/djXzyR/ Just click the "CDN" button next to any of the classes and you'll get the link copied to your clipboard. And the club-only plugins are clearly laid out there as well, and some common questions are answered at the bottom.

Hi @zozo We just had a similar question that can probably help. Please check out this thread: Happy tweening.

Thank you guys, absolutely brilliant!! I've kind of had to jump in to this project with 2 feet and learning as I go but good to know the fundamentals especially in regards to external SVGs and calling from CSS etc. I'll put the SVGs inline and go from there. I'll run through the tutorials more too and implement as you've suggested. Thanks again.

okay, if I understand your desired outcome correctly, I'd recommend creating the explosion timeline ahead of time rather than every time you click. You can then play() it on each click. In that click handler you can pause the tank timeline and then add a delayedCall to resume() it. Maybe something like this: Does that help? Happy tweening.

Hi @popflier Yes you can add tweens to a timeline with add(), but in this case, that is not what the "part2" is doing. It's a position parameter label. I wanted both of those tweens to start at the same time so I used the label. More info about the position parameter can be found here: https://greensock.com/position-parameter In addition to labels, the add() method does allow you to add tweens, timelines and callbacks to the timeline. Yes they will play in sequence unless you add the position parameter. @Carl has an excellent article about creating timelines in functions and returning them to a master timeline with add(). https://css-tricks.com/writing-smarter-animation-code/ The "#image" target in that tween is indeed targeting #image1, #image2 and #image3 as it loops. You'll see that we have the index of the loop (i) in there? On the first iteration of the loop i has a value of 0 so we add 1 to that (i+1) which we then concatenate with the string "#image" and the result is "#image1". That's just one way of doing it. You don't even need the IDs on the images. We could get a node list and use that in the tween too. // get the elements var thePics = document.querySelectorAll(".image"); // this tween would do the same thing tl.to(thePics[i], tl.duration(), {opacity:1}, 0); I only used the IDs to show another option as I had already added an array option in one of the other tweens. tl.to(theTarget, 0.5, { backgroundColor:colors[i], ease:Linear.easeNone }, "part2"); That little index is quite handy for many things when you're looping. Hopefully that makes sense. Happy tweening.

I don't think SVGs used as background can be animated using JavaScript. Your svgs are inline(included in HTML) not as background. So ya you can do that using GSAP, check out the following reply I posted yesterday.

Just thought I'd share some banner examples from my day-job https://www.andyfoulds.co.uk/banners/html5_banners/ Reckon every one has GSAP to thank to some extent! Andy___F

Thanks for that, I thought it might be the case that I need to hide the 2 and create a new one.

Hi @akcreation Welcome the forum and thanks for joining Club GreenSock. You can grab any available links for the CDN from the GS home page. I sometimes forget which plugins are Club only so I also have this page bookmarked for a quick overview. https://cdnjs.com/libraries/gsap Happy tweening and welcome aboard.

I wouldn't say it's a bad practice. I think it's better for the developer to decide what language features should be transpiled. There's really no need to build a single, one size fits all solution anymore as ES6 can run in most browsers now. I use prpl-server to do differential serving, which serves a bundle that is optimized for a browser's capabilities. That works really well with HTTP/2 as you can basically create a bundle on the fly. https://github.com/Polymer/prpl-server-node#as-a-library

I'm not sure what the problem is. It seems to works on Stackblitz. Maybe try exporting it and building it locally and see it if still works. https://stackblitz.com/edit/angular-3rxkgr

You can use GSDevTools to control your animations, it won't help you with interactive animations but you can build your animation separately and use GSDevTools to get your timing right. https://greensock.com/docs/Utilities/GSDevTools You can also use timeline to build such animations and make the flame effect at right moment using position parameter. https://css-tricks.com/writing-smarter-animation-code/ Apart from that not sure what to suggest you as your demo doesn't load images because they are hosted on http server, save them somewhere with https so they will show up on your demo.

It was really hard to debug your example as you were performing some calculations onDrag which was re-positioning element at random position. That being said, what you are doing, I have done that countless times and I have never faced such issue. In which browser are you experiencing it? I didn't notice behavior you are experiencing. I looked further into it, at first I was going to say I am experiencing same behavior but I think you are dragging your Draggable of type 'x' vertically so it doesn't move. But if you drag it horizontally it behaves correctly.

Thread I mentioned shows basic example of parallax effect that responds to mouse movement. I looked up their website, they implemented it using Three JS. You can do that with HTML as well but you will need some practice and a lot more patience but effect will be slightly less immersive.

In addition to Sahil's sweet demo and advice its worth noting that @OSUblake used MorphSVG to generate a canvas rendering. I suspect you could take a similar approach with an off-canvas SVG that you animate with DrawSVG and then query its path data and use an onUpdate to do some conversions and draw it on canvas. Haven't tried it myself but might be worth giving it a shot. That way you will be able to play(), pause(), reverse() or nest the animation in a timeline.

GSAP draws paths by animating stroke-dashoffset and stroke-dasharray which are CSS properties. Which you can do on canvas too. But SVG elements have a method called getTotalLength. Canvas has Path2D method that lets you print a path on canvas but it doesn't have method like getTotalLength. But you can create a path element and use it's getTotalLength method to construct your path and animation. Check the following example using this approach.

Hi @jiggles78, Another version "Scroll the blob" Happy tweening ... Mikel

I think I'm learning more in this thread than I did in 3 months of coding bootcamp. You've been so wonderful with your time and I understand if you will need to just cut me off from asking questions. That being said...I have a couple more questions about the menu I'm trying to code. However, I also have a question pertaining to the pen you did above for @smallio. For the pen, my question is about the "part 2" in the code. You have used tl.add("part 2"); And then called "part 2" again at the end of the timeline tween code: tl.to(theTarget, 0.5, { backgroundColor:colors[i], ease:Linear.easeNone }, "part2"); tl.staggerTo(splitText.chars, 0.75, animations[i], 0.04, "part2"); So you can use the .add to literally add tweens to the timeline? Does this content get initiated after the previous content completes? For example, if I had a tween that said move box to x:0, y:0. Then I used the tl.add and then had a second tween on the same timeline that said move box to x:10, y:20. Would the box complete it's movement to x:0, y:0 and THEN do it's movement to x:10, y:20 because I used the .add? Can you explain why you are calling an ID that doesn't exist in the HTML or CSS here? There is an ID that is #image1, #image2, #image3 but there isn't an ID that is just "#image" and that's confusing to me. tl.to("#image" + (i+1), tl.duration(), {opacity:1}, 0); I'll ask the question pertaining to my menu in a separate post to not confuse the two. Thanks!

Hey @smallio Okay, I re-read your question and I'm fairly certain you meant a background image for the page. The answer to that is you use the index of the loop to target the elements that are not part of the jQuery each() loop or $(this). Accessing that index number is quite powerful. Here's one way to do it. Hopefully that's what you needed. Happy tweening.

I'm not sure I follow. Do you mean a picture as the background of the grey box or did you mean a background image for the entire page behind the grey boxes? Both are certainly possible. I just want to make sure which you needed. Happy tweening.

Hi @yulia and all scroll fans, It's a bit crazy, but it's a lot of fun: Happy scrolling and tweening ... Mikel

Hi @jSwtch, I've covered some basics of this in a previous post ... it might be helpful. It doesn't handle the distortion at all, but can give a sense of motion and depth. It may be a starting point.

It's not going to be easy to get it done in CSS, you can do it but you won't get that much detail. Your best bet would be to use 3D model and load it using Three JS, you can use GSAP to animate it.