Jump to content

Leaderboard


Popular Content

Showing content with the highest reputation on 05/10/2019 in all areas

  1. 4 points
    Hi @mtkramer, Look in the docs: yoyo works only in conjunction with repeat To get back to the starting position, set your repCount(count); to an even number. https://codepen.io/mikeK/pen/pmyWxa Kind regards Mikel
  2. 3 points
    I noticed a few problems: Your #p1pathB <path> had a typo - there was no "d=" before the path data string. That's a syntax error. You forgot to load ScrollMagic It looks like you're just using #p1pathB as a reference for the end values, but you had it nested inside of the <clipPath> element. I'd take it out of there. Here's a fork that doesn't use ScrollMagic, but just shows the path morphing: https://codepen.io/GreenSock/pen/9d91bcd8b9beb1d39a900235bc928a96?editors=0010 Does that help?
  3. 2 points
    If you have a bunch of letters to animate and you want to use 3D rotation, I'd say you'll probably find it easier to use DOM text. You could make it really easy on yourself and use the SplitText utility. More info: https://greensock.com/SplitText
  4. 2 points
    ...and we would become the animation as it consumes us.
  5. 2 points
    Can one imagine what a .max version of TweenMax would be like? 🤯 Wormholes would appear, light would bend, world peace!
  6. 2 points
    Hi DD77, It appears you have found our previous discussion on the masking of images given the pen you have forked. Given that the original pen works as a full screen reveal, what did you change? That will be the root of your issue here. If I understand your request correctly, you need to create a timeline onLoad that goes from 0 to 100% of the screen. Add a pause at halfway its progress. Then, have some logic on the click event to detect if the timeline is at its end. If it is, play reverse it. If it isn't, play forward. Does it make sense? ps: You will have to make sure you recreate your timeline every time the window is resized.
  7. 2 points
    HI @JonQuayle, A couple problems ... in some places you are using what look likes jQuery syntax, but jQuery is nowhere to be found. With calling in jQuery and modifying a few things to make use of it ... you should be good. https://codepen.io/sgorneau/pen/bypvpa Also, there was an extra parameter being passed in your .to calls ... I stripped that out. .to uses .to( target:Object, duration:Number, vars:Object, position:* ) : * You were passing .to( target, duration, vars, position, somethingElse)
  8. 2 points
    LOL ... I'm usually the passenger in that car! 🤦‍♂️🤣
  9. 2 points
    In addition to my Development work, I've also put together an instagram page containing some of my Motion Design work. Enjoy! https://www.instagram.com/r4b0nmotion/
  10. 2 points
    We can try, but sometimes the community just grabs the wheel at the last second and we're now careening off the topic of GSAP.
  11. 1 point
    Who is claiming that Cloudflare *isn't* GDPR compliant and in what way are they failing? https://www.cloudflare.com/gdpr/introduction/
  12. 1 point
    You can also use all the Club plugins on CodePen for free if you want to start playing with SplitText now. Happy tweening. https://codepen.io/GreenSock/pen/OPqpRJ/
  13. 1 point
    I am looking forward to upgrading to the "Club" Wednesday when I get my SS money. I will have access to SplitText and more. Thank you for your advice. My best, Bobby
  14. 1 point
    Do it like @Dipscom said. Create a timeline and then you can animate the progress() to/from any percentage you like. You will have to rebuild the timeline for an updated radius when the window is resized.
  15. 1 point
    rotationZ is the same as rotation. x/y rotations of SVG child elements won't work in most browsers as it's not supported by the spec. You can rotate the entire SVG in x/y/z, but not the guts of it. Make sense? Happy tweening.
  16. 1 point
  17. 1 point
    Hey @Shaun Gorneau, Thanks so much, you are a legend! It is always those small details I miss - still a novice at this. Thanks again Jon
  18. 1 point
    There is a GSAP snippet for VSCode: https://marketplace.visualstudio.com/items?itemName=hridoy.gsap-snippets that will complete a block of code for you. You only need to replace the parameters. Once you gain a mastery of the syntax you likely won't need the snippet. Also have a look at https://ihatetomatoes.net/get-greensock-101/ for an excellent and free GSAP course.
  19. 1 point
    You guys are having way too much fun with this Love it.
  20. 1 point
    An extension to the previous pen... In typical fashion around here, one thing leads to another and gets completely off the original topic. Extending Craig's elegant x: window.innerWidth I think I might have come up with a fairly decent option for making transform based animations responsive. It basically uses the parent element as a stage and modifier to animate relative to it. https://codepen.io/Visual-Q/pen/XwXQGV
  21. 1 point
    Sweet work @Visual-Q 👍 Looks like this thread is getting pretty clever. I think we have one of these happening.
  22. 1 point
    Very elegant Craig... a thought on how to make it responsive. https://codepen.io/Visual-Q/pen/byEZqK
  23. 1 point
    Very nice indeed, @PointC and @Shaun Gorneau
  24. 1 point
    My two cent approach: https://codepen.io/PointC/pen/ardXWP Happy tweening.
  25. 1 point
    I should have said 'we try to keep this focused on the GSAP[...] but there is no law stopping people from jumping in and sorting it out'.
  26. 1 point
    https://codepen.io/sgorneau/pen/oRbEJX
  27. 1 point
    Hi @CloudStrife, Welcome to the GreenSock Forum. Look at this thread. There are some sliders ... Kind regards Mikel
  28. 1 point
    Thanks a lot @Mikel, I just amazed by the quick response and the solution is my life saver ! Happy to be the part of the GreenSock community.
  29. 1 point
    Hi @Thiyagesh, Welcome to the GreenSock Forum. Just add https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js https://codepen.io/mikeK/pen/pmgEqP You need GSAP TweenMax, ScrollMagic and GSAP plugin for ScrollMagic. Since ScrollMagic 2.0 you need to also include animation.gsap.min.js if you want to use GreenSock for the animation. Happy tweening ... Mikel
  30. 1 point
    Yep, the SplitText plugin would make that super easy. https://codepen.io/PointC/pen/ZNbmZO All of the Club GreenSock plugins are huge time savers and a ton of fun. I highly recommend a membership. More info about joining the club: https://greensock.com/club
  • Newsletter

    Want to keep up to date with all our latest news and information?
    Sign Up