Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Sahil last won the day on November 25 2018

Sahil had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Sahil last won the day on November 25 2018

Sahil had the most liked content!

Community Reputation

2,572 Superhero

About Sahil

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

9,887 profile views
  1. You have spelling mistake, try visibility tl.set("#splash", {visibility:"hidden"})
  2. It isn't members only. I just copied link from docs, it works. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.1/gsap.min.js
  3. You need to determine how far object is from center based on SVG's internal coordinate system then animate it. There is a bit of learning curve, you can refer to discussions in these threads, Also, please avoid tagging anybody in questions as we usually read all the questions.
  4. @GreenSock now it doesn't skip zero duration tweens but still skips call method.
  5. Hi, Just came across this odd behavior which didn't happen in gsap 2. If you click on buttons as follows, T1, T2, T1, T2 then you will notice that element's opacity just stays 0.1 and it also skips any calls at the start of timeline. The initial value does get recorded if I am resetting it somewhere in play head of timeline, uncomment line 38. Only workaround that seem to work is setting everything in onStart, a bit inconvenient but is that intended change? Release notes don't suggest using onStart to set values for repeating tweens.
  6. @Shrug ¯\_(ツ)_/¯ I wasn't aware of that, thanks! It means alot . I don't remember ever helping you but glad my posts helped you.
  7. You need to wrap the element in some container with desired height and use wrapper as trigger. In this case I am using another wrapper to keep set overflow on visible elements. Hiding overflow in some way will prevent page height from growing. You can tweak everything to get desired result. https://codepen.io/Sahil89/pen/oNNOLZb?editors=0010
  8. 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
  9. 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.
  10. 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
  11. 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/
  12. 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
  13. 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.
  14. 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.
  15. 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,