Jump to content

Sahil last won the day on November 25 2018

Sahil had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Sahil last won the day on November 25 2018

Sahil had the most liked content!


2,541 Superhero

About Sahil

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

9,779 profile views
  1. You need to user horizontal scrolling for this, so you can trigger animations just as you do while vertical scrolling. Check out all other examples on that site, it has demo for almost everything. http://scrollmagic.io/examples/basic/going_horizontal.html If you don't want to use horizontal scrolling then you can use intersection observer API to trigger animations, https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
  2. What you are trying to do is more suitable for canvas. It seems you are creating really long paths, which gets overwhelming for browser. It can be achieved using 2 canvas stacked on top of each other as layers. Draw your lines on bottom layer with lineCap set to round. And draw your circles on top layer. This way you won't be drawing too many paths unnecessarily.
  3. You are using HTTP links on HTTPS site so they are getting blocked. Change your cdnjs urls to https. Also note that you are using 'latest' link that actually points to really old version of GSAP. Latest version is 2.0.2. https://cdnjs.com/libraries/gsap
  4. That tutorial doesn't apply to what you are trying to do. You will need to morph multiple shapes, and you will need to animate fill color as well based on what are you morphing into. Take a look at demo by @PointC, This tutorial will help you write timelines using functions, https://css-tricks.com/writing-smarter-animation-code/
  5. When you define a from tween, GSAP will set your element to that position and animate back to original position. So for example if your element is at 0 and you create a from tween with value of 100, GSAP will set your element to 100 and animate back to 0. If while creating the tween if element was at 50, then GSAP will animate from 100 to 50. If it was already at 100, then nothing will happen because start and end positions are same. I removed each because it was unnecessary. You can still use each and it will work. Also, with GSAP you don't need anything like jQuery's stop. GSAP overwrites any tweens for same property of the element by default. You can change the overwrite behavior if you ever need, check the docs. https://greensock.com/docs/TweenLite You can visit the learning page and youtube channel to get familiar with GSAP API, https://greensock.com/learning https://www.youtube.com/user/GreenSockLearning
  6. Problem is you are using a from tween, so as soon as you hover your element jumps to 10 pixels and animates back to 0. Also, you were using timeline and adding all those tweens to it even though you won't be reusing them.
  7. 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.
  8. 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,
  9. 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.
  10. You just need to pause the timeline so it won't autoplay and get in the way. Does that help?
  11. 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.
  12. 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
  13. 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.
  14. 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(); }
  15. 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,