Sahil

That's due to how browsers handle text and inline-block elements. When you use SplitText, all text characters get split into div tags with their display set to inline-block so browser treats them as individual block. And if you use words as well to split, they are split into div tag and contain all the individual characters but an inline-block can't have more than 100% width. When you use revert method your text gets treated as block of words and text usually gets wrapped if it it can be wrapped or overflows the container. Check the following demo, to see how different length words get wrapped. I don't know what could be solution apart from ensuring that your words aren't longer than or equally wide as the container.

The transformOrigin for html elements is at center. You can change it using percentage or by using left, right etc. For svg elements, by default smoothOrigin is true so lets say you change your transformOrigin your element will animate as if it already had that transformOrigin, in some cases you will want to disable that. On the other hand if you change transformOrigin for html elements, they will jump and smoothOrigin does not support html elements. To animate pseudo elements you could use CSSRulePlugin to select them and animate. But it can too tricky to work with them. For example if you define your rule as '.close span:after' then you will need to use that string to select pseudo element, you can't use 'span:after'. You would be a lot more comfortable using actual elements or SVG. https://greensock.com/docs/Plugins/CSSRulePlugin

Not sure what you are attempting to do and what problem you are facing. Can you post a simple codepen demo so we can understand your problem?

Well maybe start with something simple and then build on top of it. Simple examples are really good way to understand something more efficiently. Not sure if it will help but in first few minutes in following video I have explained how Draggable works.

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.

That won't work for DrawSVG as path data doesn't change. You can use modifiers plugin instead of onUpdate to retrieve stroke-dashoffset and stroke-dasharray but you can instead create a class that will work just fine in this scenario.

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.

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.

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.

Here is how you can do it. First you need to record position of your element using getBoundingClientRect and then append it inside your target container and reset your target element's x and y translate values. Now again record the position using getBoundingClientRect and use both position values to calculate the difference. Then use the from Tween and animate it to the position based on difference.

Sorry I am not sure, @OSUblake can comment on that. Recently he mentioned types are incomplete, I am not aware of any workaround that.

Ya codepen can be really handy to do any experiments quickly. You can fork any pens that are public or you can also create templates as you prefer. Check out their docs and FAQs. Yes you will be able to perform all kinds of 2D animations using SVG. If you are familiar with any kind of animations and little bit of JavaScript then it will be easy to get going. I would recommend visiting the learning page and GreenSock's youtube channel to get started. https://www.youtube.com/user/GreenSockLearning There is also a video tutorial course by @Carl, https://www.nobledesktop.com/html5-greensock-video-class-gsap?a=ox7 I don't know if it covers SVG in detail but any 2D animations you perform on regular HTML elements can be performed on SVG elements. Then there are a bit advanced effects like drawing or morphing shapes that let you animate paths using DrawSVG and MorphSVG plugins. Finally go through the SVG Gotchas thread so it will save you a lot of time in future.

Here is one example by @OSUblake https://stackblitz.com/edit/angular-tkmxb4 Take a look at docs for NPM usage, https://greensock.com/docs/NPMUsage

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.

I am not sure if you changed your demo after posting the question as it contradicts a bit. Anyway, following is demo how you can do it by taking advantage of different inbuilt features of GSAP and avoid some calculations. I have left comments to explain some key parts of the demo. Check docs to read more about invalidate

Hi @WebDynamix, Thanks for getting Club membership. We would be happy to help. Are you saying you downloaded files but it doesn't have ThrowProps Plugin? Please visit your Dashboard, there you will find links to download files as per your membership. In your case you will need to download "GSAP with Shockingly Green bonus". And sorry that you are facing issues, rest of our team is from USA, they will look into it once they get online.

You can go through following thread where I have explained how you can move points based on mouse position. Now think of those blobs made of points, you will have to keep track of their original position by creating array or by creating objects for those points. And then you can animate them using same calculation that I have explained. To reduced movement based on how far mouse is, you can take some large distance like a diagonal and compare it with current distance between mouse and original position to determine the movement. You can create it using canvas or svg, just minor difference in how you keep track of your points. You already have example with canvas, following is example by @OSUblake using svg. Once you have figured out how to do that using SVG, you can easily use your blobs for masking. You will just have to move your target element inside the mask. And no, if you replace those plus signs with circles, it will create cloud like shapes instead like blobs.

Not sure how you ended up there, usually you wouldn't want to do that. And no, it is quite different. Instead you will want to use fromTo tween or combination of using 'set' and 'to' tween. Generally you will want to use fromTo tween to keep things more organized. If you are not familiar with immediateRender, when you use set method or define from or fromTo tween, GSAP will set your element to the starting position as soon as that statement is executed. In some cases you want to avoid that so you will set immediateRender to false. Contrary to from, fromTo and set. To tweens animate from their current position to a certain position so they dont have immediateRender. So if you have any kind of delay on the tween your animation will jump when tween will start. Take a look at following demo and video to learn more about different tweens and how immediateRender affects your animation.

You can create a master timeline and add your child timelines at same position using position parameter. Now if you speed up master timeline both animations will stay in sync. https://css-tricks.com/writing-smarter-animation-code/ If you plan to move that bar that "triggers" the pulse then you will have to perform a hit test to trigger pulse. Easiest way would be to compare x translate.

Take a look at PIXI JS docs and an example that shows how you can have interactive objects. https://pixijs.io/examples/#/demos/interactivity.js http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html I didn't understand your rest of the question, I will suggest rephrase your question and try posting it in PIXI js forum. http://www.html5gamedevs.com/forum/15-pixijs/

Thats because you are changing perspective on mouse event, so change in perspective causes a quick jump. Set perspective outside of event.

@iuscare Actually mouseover and mouseout bubbles so every time you mouse over or out on child elements it will trigger your event listener on parent. Instead mouseenter and mouseleave do not bubble so if you move your mouse on child elements, it won't trigger the event.

You can change maxDuration and minDuration while defining the Draggable or you can change it on the fly. You can also perform tests on distance between object and target location inside snap function to set the maxDuration. https://greensock.com/docs/Utilities/Draggable Read 'throwProps' under Config object properties In following demo I am changing minDuration to demonstrate.

ScrollMagic supports horizontal scrolling, you need to set vertical property to false when defining controller. http://scrollmagic.io/examples/basic/going_horizontal.html Take a look at following thread for how you can scroll horizontally using mouse wheel. Using ScrollMagic horizontally will let you define your scenes as you want. Take look at other demos in the scrollmagic's examples page, it covers almost all possible scenarios.