Jump to content
Search Community

Sahil last won the day on November 25 2018

Sahil had the most liked content!

Sahil

Business
  • Posts

    1,004
  • Joined

  • Last visited

  • Days Won

    71

Everything posted by Sahil

  1. You were passing timeline as a string with single quotes instead of actual timeline.
  2. 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
  3. 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.
  4. 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.
  5. 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,
  6. 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/
  7. 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/
  8. 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,
  9. 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.
  10. 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.
  11. Ya you can have multiple timelines starting simultaneously in parent timeline using position parameter. Take a look at following video,
  12. Two ways, 1. Add empty tween at the end of Timeline, timeline.to({}, delayTime, {}); 2. Use delayedCall inside onComplete function, var Tween = new TimelineLite({ onComplete: function() { TweenMax.delayedCall(delayTime, function(){ this.restart(); }); } });
  13. You can change the speed by changing timeScale on reverse. But to do that your timeline should be constructed as single parent timeline, that can contain other timelines. Take a look at following article on how you can write better animation using functions, you are already doing it just need minor tweaks. https://css-tricks.com/writing-smarter-animation-code/
  14. Oh my turn! my turn!! PS: Sorry couldn't resist
  15. I noticed this in Chrome few days ago, solution I came up with was using filter on svg element. Then set svg opacity to 0.01 and set position to fixed so element will stay in viewport.
  16. Sahil

    drawSVG bug?

    Not a bug. You have two fromTo tweens which have immediateRender set to true by default. So when second fromTo executes, it immediately renders your path to that value. You can either set immediateRender to false or use a 'to tween'.
  17. Just came across a tweet, couple of days ago p5js launched their web editor. So you won't really have to mess with Codepen. https://medium.com/processing-foundation/hello-p5-js-web-editor-b90b902b74cf https://editor.p5js.org/
  18. In your demo, you had syntax errors and you weren't linking p5.js. So nothing was working. You also need to setup your canvas by using createCanvas method. I don't have any experience with p5.js but take a look at following video. That channel will take you on a long journey and has a lot of lessons on p5.js. In case you you need to animate your objects, you can use GSAP(for what this forum is). You just need to define your values in form of object. To demonstrate, I have changed your body variables in object and animating them using GSAP. If you ever decide to learn HTML, CSS and other stuff, we can point you to some helpful resources. And if you have GSAP API related questions then we would be happy to help.
  19. Ya sure you can animate multiple properties of same element. In following demo I am using timeline and setting position parameter to zero so both animations will start at same time. If you are not using timeline then you can define two TweenMax tweens and they will run at the same time.
  20. Here is @OSUblake's demo showing how you can use morphSVG on canvas.
  21. Sahil

    SVG transform origin

    Ohk, it's not really GSAP thing just how scale behaves when you set cx, cy attributes. I was noticing translate x and y changing in matrix but it wasn't reflecting in _gsTransform. Now it's clarified.
  22. Sahil

    SVG transform origin

    Not sure why it went unanswered. Problem is OP was changing cx, cy attributes of the circle but once at start when you set scale to zero, GSAP will set transform origin based on that initial position. That's why all scale downs were ending up in top left corner. The fix is pretty simple, use GSAP and set the circle's x and y translate. Another thing to note, unlike HTML elements the default transformOrigin for SVG elements is top left corner. @GreenSock I guess it is conflict between data-svg-origin and css transform-origin, I can see matrix updating when scale animates, but _gsTransform doesn't change so it is changing in CSS I guess. Can you explain? Here is reduced test case.
  23. No you don't have to get club membership to use club plugins in Codepen projects. Support for codepen projects was added couple of months ago. Make sure your files are linked properly, if you are still facing problems then post a link to your project.
  24. In previous thread, @PointC was correct. The first frame is visible that's why you have to reduce it by one frame. There are no arrays involved, it is just you shifting background in multiply of frame width. You can add and remove the ticker event listener on mouse enter and leave.
  25. You can pause that and restart just like any tween because it is instance of TweenLite, autoPlay.pause() and autoPlay.restart().
×
×
  • Create New...