Jump to content

Sahil last won the day on November 25 2018

Sahil had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by Sahil

  1. 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.


    See the Pen gjBLEm?editors=0010 by Sahil89 (@Sahil89) on CodePen


    • Like 4
  2. 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.



    • Like 5
  3. 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.



    • Like 3
  4. 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.




    You can also use timeline to build such animations and make the flame effect at right moment using position parameter.





    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.

    • Like 4
  5. 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.

  6. 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.


    See the Pen vaRjvZ?editors=0010 by Sahil89 (@Sahil89) on CodePen



    • Like 3
  7. 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.

    • Like 3
  8. GSAP draws paths by animating stroke-dashoffset and stroke-dasharray which are CSS properties. Which you can do on canvas too.


    See the Pen ZjxOVR?editors=0110 by Sahil89 (@Sahil89) on CodePen


    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.


    See the Pen xJWOmB?editors=0010 by Sahil89 (@Sahil89) on CodePen


    • Like 6
  9. 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.


    See the Pen mjXRar?editors=0010 by Sahil89 (@Sahil89) on CodePen


    • Like 4
  10. Quote

    So basically forking the pen allows you to add pre-programmed javascripts to your CodePen?


    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.



    You can then use a series of commands to create animation special effects such as bounce, outlining etc.? 



    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.

    • Like 6
  11. 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.


    • Like 6
  12. 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.

    • Like 2
  13. 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.


    See the Pen vdzjyg by osublake (@osublake) on CodePen



    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.

    • Like 5
  14. 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.


    See the Pen pZeYPb?editors=0110 by Sahil89 (@Sahil89) on CodePen



    • Like 3
  15. 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.


    See the Pen xJqway?editors=0010 by Sahil89 (@Sahil89) on CodePen


    • Like 5
  16. ScrollMagic supports horizontal scrolling, you need to set vertical property to false when defining controller.




    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.

    • Like 2