Jump to content
GreenSock

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

Leaderboard


Popular Content

Showing content with the highest reputation on 07/24/2019 in all areas

  1. 2 points
    Hey Kenno and welcome to the forums. I think you need to a conditional check similar to this: $('.sidebar__menu').on("click", function(){ if(!tl.reversed()) { tl.reversed(true).timeScale(2); } else { tl.reversed(false).timeScale(1); } }); And you can remove the t1.reverse().timeScale(2); line above. It'd be helpful for me to test with some actual HTML included in your demo.
  2. 2 points
    Hey @nolimit966. One way to smooth scroll on button hover would be to have the boxes animate the full wrapWidth on hover, binding the direction to each button. Then on mouseleave you kill the tweens. https://codepen.io/GreenSock/pen/OKNadm?editors=0010
  3. 2 points
    Hi @Its_Lefty, Welcome to the forums. Based upon the example site you showed, I feel the below examples may help you better achieve your goals. https://codepen.io/jbsmith731/pen/dWvRBX https://codepen.io/ethanwalpole/pen/xorjLK https://codepen.io/PointC/pen/zaBYoW Hopefully something within those examples will help your efforts. Again welcome to the forums. [ EDIT: Did some formating change on the forum that is parsing the links? Instead of just posting a link it parses it to "See the pen..."]
  4. 1 point
    Here is an example integration of ScrollMagic along with Smooth Scrollbar. https://codepen.io/luluberlu/pen/gZGwoW The integration of those two is also discussed in the following discussion (perhaps others also). https://github.com/janpaepke/ScrollMagic/issues/652 Maybe that might assist you in some way if you wish to take that approach. Of course test extensively regardless of what approach you take to ensure what you create is performant across browsers and devices as the users scroll. @OSUblake, 😁 that example and related thread(s) will never die, its part of your legacy here at the forum. ;--) ¯\_(ツ)_/¯
  5. 1 point
    ScrollMagic is not a GreenSock product. There are threads about it here, but it's not officially supported. That being said, check out this post and demo from @OSUblake. We've also discussed smooth scroll at length in these threads. Happy tweening.
  6. 1 point
    Hey @Akshay Manoj, A little help ... https://codepen.io/mikeK/pen/YmqaXo More: Happy tweening ... Mikel
  7. 1 point
    You can find the GSAP documentation at https://greensock.com/docs As the link I provided before says, I would recommend that you animate your logo based on its container sizing. There are multiple ways to do that and the best way depends on how you need it to behave. There's no special trick to make it automatically responsive. You need to code it the right way, but as I said I don't have time to do it for you.
  8. 1 point
    line 26 !! If you play with the code, always make a fork. It calms the nerves.
  9. 1 point
    It looks great - just do it.
  10. 1 point
    Thanks @mikel, I have tested my thoughts, the tl.time() could compare labels'time well.
  11. 1 point
    Just wanted to chime in here, I have the same problem with the defaultView, using next-plugin-transpile-modules. I also have been using @Hossein Rahimis solution, but it's not perfect because it introduces issues with scoping. With next.js you can also dynamically import the plugin with something like const SplitTextPromise = import("gsap/SplitText"); and then in componentDidMount, wait for the promise to resolve SplitTextPromise.then(SplitText => { const split = new SplitText(); }); It has the same issues as the other method, but I find it slightly cleaner because you're not mixing require and import. Anyway, @GreenSock it would be really awesome if you could fix this so we can import the modules like every other module, this is the only headache that GSAP has been giving us for a long time now, otherwise excellent product!
  12. 1 point
    One more pen for the concept. I animated the size of the parent container so you can see how it works responsively without having to resize the window.
×