Jump to content

Sahil last won the day on November 25 2018

Sahil had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Sahil

  1. When something doesn't work check developer console by hitting F12 to see if you are getting any errors. Your demo was missing jQuery, you can add that from codepen settings. Feel free to post GSAP related questions.
  2. It is still not clear what you are trying to do. But it feels like what you want is, if you click on new box old one should hide the content, Correct? You can check rest of the demos by @OSUblake in following thread,
  3. I think issue has to do with ScrollMagic and how it handles tweens that are animating same property that conflicts. ScrollMagic is not GSAP product, you should try posting issue on Github. https://github.com/janpaepke/ScrollMagic Alternate solution would to use fromTo tweens, with immediateRender disabled on all tweens except first one. And setting duration on your scenes, you will notice jumps because your element animates 400 pixels but you are scrolling only 300 pixels. A better solution would be to use enter/leave events to create new 'to' tweens inside the event handler so there won't be conflicts. When you define a to tween, GSAP will animate element from current position to the target position, so when you scroll and refresh all wrong values get recorded and create conflict. When you define from tween, GSAP will animate from given position to current position. But by default immediateRender is set to true so GSAP will set your element in that position that's why you need to set it to false on 2nd and 3rd tween.
  4. You just need to pause the timeline so it won't autoplay and get in the way. Does that help?
  5. Those values get passed as string. You need to create JSON string and parse it. <div data-from='{"yPercent": "0", "rotation": "0"}' data-to='{"yPercent": "-100", "rotation": "5", "ease": "Expo.easeOut"}'> const from = JSON.parse(el.dataset.from); const to = JSON.parse(el.dataset.to); Double quotes are important, if you don't want to use quotes, you will find some stack overflow threads with regex solutions. You can also encode JSON string from server in PHP, there will be equivalent solutions for other languages.
  6. You need to create paused timeline outside of events so you can play and reverse it on mouseenter and mouseleave. For gooey effect you need to use blur and contrast trick, check this https://www.youtube.com/watch?v=ZDFwBEXN0pM The ripple effect is SVG filters, feTurbulence specifically, https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence
  7. Glad you found it inspiring, most credit goes to @OSUblake and the book I mentioned. I started participating in forum with the intentions of learning from him, it has been great experience so far. I see that you are being active recently as well, great job! Hope to see you continue do so.
  8. That's close but in your case you are not using different strokes so you can do everything in render function to optimize further. TweenLite.ticker.addEventListener("tick", render); function render(event) { ctx.clearRect(0, 0, canvas.width, canvas.height); // set style and beginPath for (let i = 0; i < lines.length; i++) { // call draw function of prototype but don't stroke in prototype // to avoid stroke calls because you are not using different strokes // or draw lines here directly if you are sure you won't need to make changes // like randomizing stroke etc } ctx.stroke(); }
  9. I have linked some threads below but looking at your animation I don't think you need to do that. Just hide the content of your container and scale it instead of changing height/width. Once animation is done make your content visible. If scaling doesn't work for you then you will need to write responsive tweens, check following threads. You need to re-create tween/timeline to adapt to new values. There are few methods to do that like reconstructing timelines, using modifiersPlugin and using invalidate(). https://greensock.com/docs/TweenLite/invalidate() In your case if you want to use invalidate you will need to use fromTo tweens for tweens that you want to update. Another thread discussing same ideas,
  10. I don't think there is any performance difference just both are applicable in different scenarios. You must be familiar with requestAnimationFrame, that gets called when browser is ready to render. So internally GSAP relies on rAF in browsers that support it otherwise falls back to setTimeout. Ticker's tick event occurs each time GSAP's engine updates and onUpdate gets called when particular tween/timeline updates. In your case we suggested you to use ticker(or you can use requestAnimationFrame) so you can avoid 100 clearRect calls and call it just once on entire canvas. Same goes for draw calls. Plus ticker made more sense because your canvas was updating on every frame. Instead if you had 4-5 tweens that won't repeat then using ticker won't be good idea because once animations complete you are executing those statements unnecessarily . In most cases when you are dealing with canvas, you will want to use ticker. With DOM you might want to use ticker in situations where you are adding some easing effect like mouse follow effect etc. Plus using ticker has some benefits over rAF, like you can easily add or remove event handler, pass paremeters or set scope. A lot more flexible.
  11. You can study @OSUblake's demos from following thread on how to speed up and slow down based on path. You can set viewport based on current x translate of car to create camera like effect of following. You can get x position of car using car._gsTransform.x. But make sure the initial position of car is at 0, 0 in your SVG so you won't need to do additional calculations to get exact position of car. There is another advance demo by Blake, I don't think you need that but here is the link,
  12. Ya moving all draw calls to single place would be better for performance. As you are using same stroke, you can construct path in loop and stroke it just once. Also use clearRect on entire canvas because everything is updating on every frame. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas As for coding style, I would have used prototype maybe, because that's how I learned to do using Foundation HTML5 Animation book. You will find it useful if you plan to do more stuff with canvas.
  13. Your spans have white background so they weren't disappearing just you couldn't see them. toggle-btn had typo in css so it wasn't getting position fixed. The menu is visible on mobile because you were animating to -100% but your element had height 100vh, so it would stay in viewport because whatever '100%' is, it was less than 100vh. You should avoid animating height, width, top, left etc because they trigger layout repaint, animate transforms instead whenever possible because they take advantage of GPU and perform better. So your animation can be achieved animating yPercent instead of top. You can learn more about animating transforms, https://greensock.com/docs/Plugins/CSSPlugin
  14. Your sixth parameter should be function, in your snippet it is seventh. I think you accidentally wrote position parameter twice. const heroTimeline = new TimelineLite({delay:'1'}); heroTimeline .add('start') .staggerTo([stage1_h1, stage1_h2], 1, {opacity:1}, 0.25, 0, stage2); https://greensock.com/docs/TimelineMax/staggerTo
  15. That's really well written actually. To set delay before text fades out again, you can set repeatDelay property. You are setting delay in both from and to values but it will ignore delay in 'from' values. On codepen you don't have to write entire HTML, you can add your scripts from settings and just write HTML body in codepen, rest is not needed.
  16. If you think about it, what you are trying to do is to create timeline for user interaction. Your character is free to move around so you can't put him in timeline. Instead you should treat it as interaction. When he reaches certain spot then trigger animation related to that position. Timeline is not best option for this.
  17. With all that I forgot to implement main effect of revealing text. https://stackblitz.com/edit/gsap-react-multiple-elements-pvnr8v?file=multiple-elements.js
  18. Does Tween1Tl.seek("startLabel").pause(); work for you? If not, would be great if you can post a demo.
  19. Happy to help! Here is less complex solution using invalidate. Instead of using another object, I am animating element directly. On resize, activeTween gets invalidated to record new values. I have left some comments for key parts but this is far less complex and better for performance because we are not creating new set tween on every frame.
  20. Hard to guess what could be happening in your actual code. And it is impossible for onComplete to fire before tween completes, unless you are using stagger tween. In stagger tweens, onComplete gets fired for every single tween. You need to pass 5th parameter as function for onCompleteAll callback. https://greensock.com/docs/TweenMax/static.staggerTo() Apart from that it is impossible for us to help without demo showing problem. But I am sure there must be something else in your code that must be causing this issue.
  21. Your snippet is fine. Can you post a reduced test case showing the problem?
  22. I tried that actually but stackblitz was giving me weird highlights throughout the code and grayed out ref attribute when I used it on those elements, so I assumed ref will work on parent node only inside loop. Still overall I am impressed stackblitz just hope code highlighting won't be issue locally.
  23. That's tricky mainly because you want to change the duration of the tweens but changing duration of tweens that are on active timeline create weird effect because you are stretching timeline's duration so it just stretches from same start position. You can't add these tweens to any timeline, only thing you can do is change timescale of whatever that timeline is but still going to be tricky situation if it is complex animation. Here is a bit more simplified demo, now instead of animating element I am animating another object between 0 to 1. Because animating actual element gets too tricky. And then using the onUpdate call to update position of element. When move function is called I am creating new tween and assigning it to currentTween variable. I am using another variable, currentVars. To record start and end position that I need to create new tween on resize. onResize if currentTween is actually active, then kill currentTween. Then call move function to create new tween. See if this works for you, I am not sure if there is better way but if I come up with something then I will let you know.
  24. Yes but you probably don't need to if you can structure your columns differently. In following demo I am animating containers so you won't have to write same tweens again and again to achieve that effect, or use a loop? Would be a lot easy for you to edit in future. Also, if you want to translate element in percentage then you can instead use yPercent. That's because your columns animate within a second but your quotes animate over six seconds. So when you scroll, all slides animate first then rest of quote tweens start playing because one's duration is 1 second and another's is 6. You can either construct your timelines with same duration or explicitly set one timeline's duration to another.
  25. You can create two timelines then add them to master timeline at position 0. master.add(tl1, 0); master.add(tl2, 0);