Sahil last won the day on September 2

Sahil had the most liked content!

Sahil

Moderators
  • Content count

    907
  • Joined

  • Last visited

  • Days Won

    59

Sahil last won the day on September 2

Sahil had the most liked content!

Community Reputation

2,203 Superhero

About Sahil

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

7,659 profile views
  1. Sahil

    Animating border using :after and :before

    @Devotee007 Not really GSAP issue, it was because your container didn't have position.
  2. Sahil

    Image revealing animation with GSAP

    @somose138 I don't have any experience with react. Though @Rodrigo has written a guest blog post on how to use GSAP with react. I am sure you will find it helpful. https://greensock.com/react
  3. Sahil

    staggerFrom() not quite Completing

    You were calling staggerFrom on elements with class 'element-span'. So each loop was adding same elements to the timeline which was creating conflict. You need to select children of current element instead of all elements.
  4. Sahil

    onStart Firing "Early"

    If you don't want to support rapid clicks then you can add logic to ignore clicks when your tween that controls timeline is active. If you want to support rapid clicks then you will have to calculate angle using onUpdate. Following is the example show how you can calculate the angle, check the console. Now you can use that to determine angle based on range you want. Also, adding classes might not be best idea, instead you can do that directly from javascript. You can simplify your math to determine range by using a rectangular map and skewing your svg. Though if you plan to add text to it then you won't be able able to use this trick. You might be able to use it by adding reverse skew on text.
  5. Sahil

    Basics: GSAP & ScrollMagic initiating

    You were passing timeline as a string with single quotes instead of actual timeline.
  6. Sahil

    RotationY not working in version 1.19.1 and above

    I remember 3D transforms working in Chrome. But looks like they dropped the support for 3D transforms from transform attribute for svg elements. GSAP used to use CSS transforms for chrome but it was changed to transform attribute in 1.19.1 for all browser consistency. Though 3D transforms do work with older versions of GSAP it will only work in Chrome as other browsers don't support 3D spec for SVG elements. https://github.com/greensock/GreenSock-JS/releases/tag/1.19.1
  7. Sahil

    killAll and relaunch one

    If you use killAll, it will kill all your other animations from entire page. Can't you just pause your timeline like you do on mouseleave? The reduced test case you posted doesn't show why you will want to kill your animations. I would suggest posting another simple demo that shows why you need to kill animations.
  8. Sahil

    Fade in Problem

    By last image I guess you mean '#blackimg'? You are writing two tweens with delay of zero on same element and trying to animate same property. So whichever tween was executed last will overwrite previous tweens for same property. If that doesn't answer your question then post a codepen demo. Also, you should use timeline for that instead of trying to achieve it by using delays.
  9. Sahil

    How to make elastic text scroll?

    You can do that by determining velocity of mouse or scrolling, then use that velocity to apply skew. So to determine velocity you can use simple easing and take difference between target and easing value. Here is demo showing original effect based on mouse. This one uses a predefined tween, I set the progress of tween based on eased value. The scroll based effect is a lot more simple as you don't need to use any predefined tween,
  10. Sahil

    Recreating Timeline issue

    You were using split text on same elements multiple times, which was creating nodes as many levels deep. In the loop, on first tween you are setting opacity and in next two tweens you are setting color but not opacity. So lets say your animation completed till 3rd line, now all character nodes in first 3 lines have opacity 1 but rest of the lines have opacity 0. Now when you click again, split text is creating new character nodes 1 level deep. First 3 lines will work fine because their parent has opacity of 1 but rest won't show up because their parent have opacity 0. If you were using opacity everywhere it would have worked, but wouldn't have been efficient. I will suggest reading this article to better plan your animations, https://css-tricks.com/writing-smarter-animation-code/
  11. You can have either one or another. What you can do though is check referrer on your server side and decide which class to add, if it is your site then don't show loader if it is external url then show loader. If you don't want to mess with server-side then look into barba js http://barbajs.org/
  12. Sahil

    morphSvg with canvas and timelineMax

    Not sure what your question is exactly. One of the reasons your animations are jittery can be because your paths are too complex and/or long. You can simplify your paths using https://jakearchibald.github.io/svgomg/ Another reason would be, you are running too many animations at once and asking browser to do too much work. Take a look at following article it has few performance optimization tips for canvas. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas As for your question about how to setup your animations, the demo you posted has a example using TimelineMax so I am not sure which part is confusing you. For parallax effect you can't use TimelineMax, here are simple examples of how you can do it in HTML. You can apply same logic for canvas,
  13. Sahil

    Give me Suggestions to showcase PLIS

    Some simple transitions that people find hard to do, you can live code these https://greensock.com/forums/topic/18904-transformorigin-help/?tab=comments#comment-87689 https://greensock.com/forums/topic/17978-try-to-do-block-reveal-with-diagonal/?do=findComment&comment=82156 This one is simple but also has a bit more advanced demo by Blake https://greensock.com/forums/topic/18880-page-transition-with-barbajs/ Simple Add some simple morphSVG, drawSVG and split text effects, https://codepen.io/PointC/pen/aawwgx?editors=0010 https://codepen.io/PointC/pen/oPELMe Intermediate Motion blur using SVG https://codepen.io/osublake/pen/WZqBjV?editors=1010 Animate along the path, a bit pacman touch. You can also include your Mario https://codepen.io/osublake/pen/vWGGGv?editors=1010 FLIP using GSAP to animate flexbox https://codepen.io/osublake/pen/vWGGGv?editors=1010 Drag along the path https://codepen.io/osublake/pen/YYemRa Circlular clip path https://codepen.io/osublake/pen/QKEjwv?editors=1010 Handwriting hamburger https://codepen.io/PointC/pen/zLbxzO Movie rating slider https://codepen.io/PointC/pen/devBRB?editors=1010 Gooey Dial https://codepen.io/PointC/pen/oqeJbo Polygon snapping https://codepen.io/osublake/full/QdbQjN SVG Dynamic Text https://codepen.io/PointC/pen/jpEdBd?editors=0010 Advanced https://codepen.io/PointC/pen/LmOvEQ https://codepen.io/osublake/full/RNLdpz https://codepen.io/osublake/pen/XXbLer/ https://codepen.io/osublake/pen/dMLQJr basically all of Blake's popular demos. Ran out of time.
  14. Sahil

    Animating border using :after and :before

    Ya you can do that but working with pseudo elments in javascript is a bit more complex. For example, you can't define your rules together. You have to select them using entire string the way you defined them, for example if you defined them in CSS as '.parent .child:after' then you must use that entire string to select them. '.child:after' won't work. It gets a lot more easier to work with actual elements. Or using SVG to do animations like these. Here is same example using drawSVGPlugin, Few things to note, 1. SVG viewbox is set to '0 0 100 100' and preserveAspectRatio is set to false so svg will stretch if element's height width changes. 2. The stroke's vector effect attribute is set to 'non-scaling-stroke' so stroke won't look stretched with svg. 3. I am using extra path that gets visible when animation completes because you could see tiny gaps on the edges. It can be avoided by setting different line cap and line join. 4. SVG overflow is set to visible so stroke won't get partially hidden.
  15. Sahil

    Play animation backwards

    Ya you can have multiple timelines starting simultaneously in parent timeline using position parameter. Take a look at following video,