Jump to content
GreenSock

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

PointC last won the day on August 14 2019

PointC had the most liked content!

PointC

Moderators
  • Posts

    3,315
  • Joined

  • Last visited

  • Days Won

    307

Everything posted by PointC

  1. PS Here's another option. https://codepen.io/PointC/pen/WqKyye Happy tweening.
  2. You need to set your timeline to reversed in the vars. tl = new TimelineMax({reversed:true, paused:true}); If it's only paused the first click reverses it, but it's already sitting at 0 so it appears nothing happened. Make sense? Happy tweening.
  3. Also in sub basement level 36. I was curious about those coordinates too. I'm assuming Adobe XD spit out those values.
  4. Your path doesn't have an x attribute so the AttrPlugin won't work here. You'll need to transform it. logoAnimation.from('#Path_23', 4, {x:30, ease:Linear.easeNone}); Happy tweening.
  5. Wow! I just noticed the GSAP forum cracked 10,000 topics. I just wanted to take a moment to thank Jack for not only creating a fantastic set of animation tools, but also for fostering such a great community. I’ve said it before, and I’ll say it again — this forum really is an oasis in the snarky Interwebs desert. A friendly community with loads of great people and tons of info and demos. Truly one of a kind. A message for any lurkers — try jumping in and asking (or answering) a question. I think you’ll be glad you did. Congratulations Jack. Looking forward to GSAP 3.0 and the next 10,000 topics.
  6. I'm not seeing it slow down. I switched the duration to just a few seconds and the ease to a Power4.easeOut just for testing and that did slow down as it should. But the way you have it posted with no ease seems like it's working correctly. I don't know anything about GWD, but there are some eases in the styles set to easeOut. Maybe those are interfering in your actual project? Someone else may see something different, but I see everything working exactly as I'd expect here.
  7. There are a lot of ways to switch the direction of the timeline on click. Usually you'll just do something like this in your click handler: tl.reversed() ? tl.play() : tl.reverse(); That will see which way the timeline is going and flip it. That being said, it also depends on whether you're allowing a click before the animation is finished. In those cases you can check it with the isActive() method. https://greensock.com/docs/TimelineMax/isActive() Because I'm a rebel and play by my own rules. Nah, just a habit. var works just fine for these little demos.
  8. If you're just using rotation, you don't really need to tween the progress like I did in that demo. I was just showing you that as an option to demonstrate the versatility of GSAP. For a simple rotation you can use a timeline too. Here's another fork of your pen with additional possibilities. Notice I'm using relative rotations and I've added a config to the Elastic ease. https://greensock.com/ease-visualizer https://codepen.io/PointC/pen/vqMdNV GSAP and JavaScript in general have so many ways of getting to the same result. It all depends on your needs. Happy tweening.
  9. https://greensock.com/docs/TimelineMax/reverse()
  10. In addition to @elegantseagulls excellent advice, I'd add another approach to this type of animation is tweening the progress(). You create a tween or timeline with all your rotations and other properties that will animate in a paused state. Then tween the progress of that animation and add any in/out eases you like. In this case the actual timeline or tween with the animation should use a Linear.easeNone so it won't look odd. https://codepen.io/PointC/pen/gNyXEx Just my two cents and another idea for you. Hopefully it helps. Happy tweening.
  11. @OSUblake Ha! So that's where you were hiding that. I remembered you posting that picture and I was actually searching the forum for it, but couldn't seem to find it. I had to grab it from an external source. I didn't realize it was three years ago. Time flies in the GreenSock neighborhood. Maybe we need to add the ability to put tags on a per-post basis in addition to threads so I can more easily find your wise words. That way we can have exclusive tags for you like "Blake's Book Bin", "you might not need ScrollMagic", "my canvas can beat up your SVG", etc.
  12. Is this what you need? https://codepen.io/PointC/pen/Wqmmod Just FYI — ScrollMagic is not a GreenSock product, but the article @ZachSaucier mentioned has a lot of demos showing how to use GSAP and ScrollMagic together. Happy tweening.
  13. There's no way I could have written that demo a few years ago. I didn't know diddly-squat until I started hanging around all these other GreenSock geniuses. Just keep tearing stuff apart and hanging around here. Things will just start clicking and you'll have lots of 'aha' moments. Just don't get too good or you'll end up as a forum Moderator and then you can never leave. ? In case you haven't seen it or you need a sleeping pill, you can read my Superhero origin story. (Not affiliated with the Marvel Universe) Happy tweening.
  14. Maybe this will help. It has drag, nav dot, arrow and mousewheel controls. No jQuery involved. https://codepen.io/PointC/pen/MzWzyv Happy tweening.
  15. At the moment I can't think of any recent demos or threads about that. Maybe look around codepen for stuff like "company history" or "animated calendars" etc... The things you find may not be built with GSAP, but maybe they'll give you some ideas. If you find something built with CSS keyframes we'll show you how to throw those out and animate it properly with GSAP. Happy tweening.
  16. You wouldn't want to animate to different percentages. You'd want to animate each box to yPercent: -100. You'll also want to set the parent pinned element to overflow:hidden. https://codepen.io/PointC/pen/xoMJZx Just FYI — ScrollMagic is not a GreenSock product, but works well with GSAP. I wrote a post about that here: https://greensock.com/scrollmagic Happy tweening.
  17. PointC

    Infinite loop

    I think this thread can help you: Happy tweening.
  18. Hi @DTales That should be in your minified or uncompressed directory in the 'utils' folder. It's not under plugins. Does that help? Happy tweening
  19. A lot of the CSS properties like text-rendering and font-kerning don't work in IE11 so I'm not sure what you did. Maybe looking at your old post will jog your memory? As @ZachSaucier mentioned, a demo would be helpful. Another good reason to make demos for questions is you'll have a reference to come back to when you forget what you did. Just my two cents but IE11 is coming to its end of support. Maybe tell your client not to worry about it?
  20. TweenMax.to(this.$refs.keyboardContainer, 0.35, {scale:this.zoomRatio, force3D:false, transformOrigin:"center top"}); Happy tweening.
  21. What type of content are you adding? Text? Images? I'm not quite sure what you need to happen here. Could you make a simple demo? Thanks.
  22. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. This is a guest post from one of our top moderators, Craig Roblewsky (known as PointC), whose "zero-to-hero" story became one of the most popular posts in the forums. His animation skills are also showcased in the "What is GSAP?" video on our home page which he created. He certainly has a knack for helping people understand challenging concepts in a concise way, as you'll see below. Preface ScrollMagic is not a GreenSock product nor is it officially supported here, but GSAP and ScrollMagic work well together, so many questions about it are asked on the GreenSock forums. This article will not be an extensive guide to using ScrollMagic or GSAP, but rather a quick primer to using GSAP and ScrollMagic together. Demos There are eight demos which can be forked as a starting point for your projects. They represent the most common types of scroll triggered animations. It is assumed that you understand the basics of GSAP and ScrollMagic. I won’t be going into detail about the code in each demo, but simply highlighting the most important aspect of each one. I’ve made them with just a few <divs> or <sections> so they’ll be easy to understand and/or reverse engineer. Scripts The first thing to know is which scripts are necessary. For starters, you’ll need the GSAP files. I recommend TweenMax. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> Using ScrollMagic requires the main script. <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script> To allow ScrollMagic to take control of your tweens, you will also need the GSAP plugin. <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script> Finally, for debugging purposes, I highly recommend the addIndicators plugin. <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script> Please note: it is important to load TweenMax before loading the animation.gsap script. If you try to use the setTween() method and do not have the animation.gsap script loaded, you will see an error in the console. The following demo is an empty shell which loads all the above scripts and jQuery. Demo 1: GSAP, ScrollMagic and jQuery Empty Starter See the Pen GSAP, ScrollMagic and jQuery Empty Starter by PointC (@PointC) on CodePen. Duration You have two choices when using GSAP tweens with ScrollMagic. You can either use the actual tween duration which then plays the animation at normal speed when you hit the trigger or you can allow ScrollMagic to hijack the duration and the tween will be played as you scroll. To use the actual tween duration, you simply omit the duration from the scene parameters. Demo 2: GSAP and ScrollMagic w/tween duration See the Pen GSAP and ScrollMagic w/tween duration by PointC (@PointC) on CodePen. If you'd like the animation to play as the user scrolls, you can add a duration in pixels or percentage to the scene parameters. This is the same demo, but the scene duration is now set to 50%. When hijacking the duration, I’d recommend changing the default ease to Linear.easeNone. Demo 3: GSAP and ScrollMagic w/scene duration See the Pen GSAP and ScrollMagic w/scene duration by PointC (@PointC) on CodePen. Looping to create scenes A common question many users have is how to create the same animation for multiple elements without manually creating a tween and scene for each one. The easy approach in these situations is to use a jQuery each() loop. If you aren’t using jQuery, a vanilla JS loop can be used too. Demo 4: GSAP and ScrollMagic jQuery each() loop See the Pen Looping to create scenes by PointC (@PointC) on CodePen. Pinning Another common animation is pinning an element, playing a tween or timeline and then unpinning. The biggest thing to remember is create a parent container for the actual pinned section. The animation then plays inside that element while it’s pinned. Quite often users will try to pin the sections that are animating and that will not give you the desired results. Demo 5: GSAP and ScrollMagic Pinning See the Pen GSAP and ScrollMagic Pinning by PointC (@PointC) on CodePen. Horizontal Scrolling This can be achieved by animating the xPercent of a parent element containing the sections in your series of slides. Note the duration is 100% * the number of (panels -1). This example has five slides so the duration is set to 400% and each panel move is 20%. This timeline is manually created but could also be created in a loop. Also note the sections themselves are not animating here. The parent container is the only element that is moving. Demo 6: GSAP and ScrollMagic Horizontal Scrolling See the Pen GSAP and ScrollMagic Horizontal Scrolling by PointC (@PointC) on CodePen. Horizontal Pinning A similar effect to horizontal scrolling is a horizontal pinning. Here we have a main pin scene to hold the parent element in a pinned position. Again, the duration is 100% * the number of (panels -1). In this case that is 500%. The first loop creates an animation for each section to move into place with xPercent:100. Using the position parameter offsets each section by an additional second. That space allows the individual animations to play. This first timeline plays in the main scene with the setPin(). The jQuery each() loop creates a simple SplitText animation for each section. Notice the trigger element is always the #pinMaster div. The trick is adding an offset for each section. The index of the loop is used to multiply by the offset variable which in this case is set to window.innerHeight. Learn more about the SplitText plugin. Demo 7: GSAP and ScrollMagic Horizontal Pin, Tweens and jQuery Loop See the Pen GSAP and ScrollMagic Horizontal Pin and Tweens and jQuery Loop by PointC (@PointC) on CodePen. Scroll w/Parallax Finally, it is possible to achieve a neat little parallax effect as you scroll. In the following demo I’ve used a wrapper class with a child and parent div for illustration purposes. Setting the child element to the right and bottom of the parent allows for animating the div up slightly as the user scrolls. The duration in this case is set to 100% but you can certainly set that to your liking. Demo 8: GSAP and Parallax ScrollMagic See the Pen GSAP and Parallax ScrollMagic by PointC (@PointC) on CodePen. Conclusion As I mentioned at the beginning of this article, ScrollMagic is not a GreenSock product nor is it officially supported here on the GreenSock website or forum. But the GreenSock community likes to help everyone so hopefully the demos will serve as a springboard for your scroll triggered projects and a learning resource as you start using GSAP with ScrollMagic. You can also view the entire demo collection here. New to GSAP? Check out the Getting Started Guide. Got questions? Head over to the GreenSock forums where there's a fantastic community of animators. Need additional details about ScrollMagic? Check out the ScrollMagic docs.
×