Jump to content

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

Search the Community

Showing results for tags 'scrollmagic'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. I'm using scrollmagic to trigger some tweens, but one of the sequences on my timeline I would like to unbind from the scroll speed, and instead animate in miliseconds. I read the solution in another topic - to just create a new trigger, but my elements are off-screen, part of a horizontal animation. What would be a smart way to triggering it? I made a simple demo - I would like to have the 3 elements near the end spin for Xms, instead of their current scroll-bound rotation. Any ideas? (Note, this is not the final animation - I plan to add many more scroll-based animations to the timeline after it) Thanks!
  2. 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.
  3. I'm following a tutorial on YouTube and almost got to the end when I ran into an odd problem. When I scroll my page, the images should fade in from opacity 0 to opacity 1. But for some reason, my images don't fade in at all. They stay at visibility: hidden for some reason and I have no idea why. From what I can tell from the tutorial, I should see the images being set from opacity:0 to opacity: 1 when I scroll, but they stay at visibility: hidden and opacity: 0. I have a feeling I'm missing something, but I'm not quite sure what it is. I attempted to repeat this problem on Codepen to see if maybe it was something I was running in VS Code that was causing the error, but wasn't able to repeat the problem in Codepen. Actually now, my images don't fade in or out at all in Codepen. Not really sure what's going on with my code at this point. Here's the code I currently have - I'm new to GSAP so I'm not really sure what it is that I'm missing to make the images fade in and out on scroll correctly. I have a feeling it's something simple and I'm just not seeing it. Thanks for the help! YouTube tutorial I was following - (I got stuck at 14:23)
  4. Hello, I went through greensock forum to find solution for smooth scrolling, and it was mostly Blake's codepen solution which pretty much worked as I want, however I was wondering would they work with scrollmagic? What exactly I mean is, I want to trigger gsap animations on element when they scroll into view, and for this I use scrollmagic. I was wondering if there will be problem with this since I read somewhere that this is just transform (which I saw with inspect element), and since it's not "real scroll" scrollmagic wont read it and trigger it when it should? This are Blake's codepens with smooth scrolling: https://codepen.io/osublake/pen/QqPqbN https://codepen.io/osublake/pen/ee9e27534440ef6ee1c2e2fdfd6c7e68 Thanks in advance
  5. Hi there! I'm trying to create a scrolling effect like this: Scroll / Parallax effect If you scroll the page down and the image is in the viewport, it will receive a dynamic translate3d on the y-axis between 0% and max. +25% (based on scroll ). If you scroll the page up, it will be reserved (up to -25%). I'm still a JS beginner, below you can see my attempt with GASP/ScrollMagic/TweenMax. Unfortunately this is still not like in the example above. The parallax-item stops moving at a certain point although it is still in the viewport and you keep on scrolling. Moreover the speed is too fast. I guess I have to modify the offset and duration ScrollMagic-Options (?) but I don't know what I should exactly do. I know that ScrollMagic and animation.gsap are not GSAP products but maybe someone can help me. Thanks in advance!
  6. Hey everyone! New Club Greensock member here I'm loving GSAP so far! Hats off to the Greensock team for creating this wonderful tool. Basically, I'm just trying to get React to compile after importing 'animation.gsap'. I haven't included a Codepen, as the app and ScrollMagic work -- but I can't get the right behaviour due to this animation.gsap issue. That said, do let me know if you want a Codepen up regardless. I installed ScrollMagic via NPM. I'm aware this issue was brought up before, but none of the solutions I could find have worked out for me :(. At the moment, I'm testing out scaling down my h2 header to half its size upon scroll to the section. Thanks in advance! UPDATE: I've loaded GSAP, ScrollMagic, and animation.gsap.js via CDN. While the former two are communicating, animation.gsap.js isn't. Apparently, it might be due to "setTween( )"? What would be the alternative to "setTween()"? From ScrollMagic Troubleshooting Docs 2.2 Make sure it's a ScrollMagic issue and not related to your animation framework. Many animation-related issues are caused by an animation framework (GSAP/Velocity) or a misuse thereof. A very common mistake for example, is that the selector for TweenMax turns up empty. For GSAP the recommended best practice is to create your tweens, but refrain from adding them to the ScrollMagic scene object using setTween. This ensures that ScrollMagic doesn't manipulate the animations in any way. If you have a look at your site now, you can check if the animations plays out the way you wanted to. If they don't, the problem is obviously not rooted in ScrollMagic. ///////////// ERROR Failed to compile ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js Module not found: Can't resolve 'TimelineMax' in '/Users/mabbs/Desktop/WebDevelopment/port-site2/node_modules/scrollmagic/scrollmagic/uncompressed/plugins' CODE import React, {Component} from 'react' import 'gsap'; import ScrollMagic from 'scrollmagic'; import '../../../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'; export default class Projects extends Component { constructor(props){ super(props) this.controller = new ScrollMagic.Controller(); } componentDidMount(){ new ScrollMagic.Scene({ triggerElement: "#scrollStarts", duration: 400, offset: 200 }) .setTween('#main-content', { scale: 0.5 }) .setPin("#latest") .addTo(this.controller) } render(){ return( <section className="projects-section" id="projects"> <div id="scrollStarts"> ------ Test ------- </div> <div className="inner-wrapper" id="main-content"> <h2 id="latest">My Latest Work.</h2> </div> </section> ) } }
  7. Not sure I'm doing the right thing here but I need the navigation to scroll horizontally. Also links should be active when the page scrolls... What am I missing here?
  8. Hi! How do I prevent the text at the bottom from overlapping the previous section with the setPin? I thought setPin would stick the current section and not allow other content to scroll over it.
  9. Hello! I need the "absolute" element to become "fixed" when scrolling 120px. After the trigger, this element must again become "absolute". But, if you scroll in the opposite direction - up from the trigger, the element must again become "fixed" until it reaches its original position. There he must again become "absolute". In my project it works only in one direction - before the trigger. And nothing in codepenio works at all Help, please
  10. Hi, Please scroll down and then up, in CodePen Pin. When I start scrolling down, animation works perfectly. If I scroll up, animation works reverse but the box does not keep original size and position. How can I fix that? Thanks!
  11. Hey everyone, I have been reading this forum for a long time but this is my first post/question as i have come across a dilemma. Hope you're all doing well. I wanted to include my JS code in the codepen but it's a big crazy mess. As you guys can see in my codepen i have a section in the project I'm building which on large screens has 2 rows with 3 boxes in each row and on small screens 1 column with all boxes stacked on top of each other. What i want to accomplish is really simple, i just want each box to fade in from the bottom-up as it comes in view. The reason I say each box is because my priority is more on the small screens with 1 column, I'm willing to compromise for large screens and what i mean by compromise is that i don't mind if the whole row animates together as it comes in view and then followed by the next row. I kind of achieved this in a very unusual way with code that is terribly wrong, and i looked at plenty of scrollmagic and GSAP examples including in this forum but i didn't come across any solutions. I would really appreciate any help in how i can achieve this. Thank you.
  12. Hi Guys, I just discovered GSAP few hours ago, and I'm trying to learn how to do cool stuff with it. Unfortunately I've chose something way out of my reach as a first task. The other day I've found a blog, with a pretty amazing effect while scrolling. And it amazed me so much that I've decided to start learning GSAP. I've found out that it might be possible to re-create this effect with GSAP + MagicScroll. I've tried few things but none's working neither close this This is a Pen, with what I'm trying currently: https://codepen.io/anon/pen/jowXzy I've redone something similar with CSS animation: https://codepen.io/anon/pen/xNrmJa but obviously it's not responsive when scrolling etc. I couldn't found what's the GSAP version of css rotate3d() As you can see I've tried: rotationX rotationY rotationZ but it's not working as css rotated3d() I'd appreciate some help from you guys! Thank you very much for your time Here's what I'm trying to achieve:
  13. I have some problems with scroll magic goes horizontal example. I have part of my portfolio website which I have some accordion images and I want them to expand to their 100% width as the people scroll the page. not by hovering. like what norgram.co is doing more or less but I just want it on my images. so I started to use the go horizontal structure of the magic Scroll and nothing is working and I don't know why. https://codepen.io/nargess-shabani/pen/oRvjGr#code-area help me, please. I am stuck.
  14. senna

    Section slides

    Hello, I'm working on a schoolproject and I would like to use something like this: http://scrollmagic.io/examples/advanced/section_slides_manual.html I made this code, but it's acting weird. http://codepen.io/codesen/pen/bwogPj Want I want: when you scroll, one page moves to te left and the next page comes in to the screen with a little scaling. I used a timeline for this. What is happing: when you scroll all page are thrown on top of each other, the backgroundcolors disappear and everything moves to the left. Not really what I was expecting. I hope you can tell me why this is happening!
  15. Hello, I am pretty new to GSAP and trying to achieve an effect that might not be possible. I am trying to get a parallax slider to pin when you start scrolling so the parallax layers will show. I would like it so that the images show up as in the .gif and start to display when you scroll. After that you continue to the normal content. I have searched all over the internet but I cannot find a good example or a piece of code that achieves this. ScrollMagic is supposed to be able to handle this but every time I try to apply it the parallax slider gets messed up. Probably I am approaching this in the wrong way and if someone could point me into the right direction that would be very appreciated. The Codepen url directs you to the parallax slider that I have been using as an example. Greetings, Mark
  16. Hi GSAPpers! First post in the forum... I code mainly html and css (and some -little- jQuery) and now I'm learning GSAP and "modern" vanilla JS since two week ago. Today I'm testing GSAP combined with Scrollmagic. I'm trying to apply the same scene (a simple TweenMax with a fade in from the bottom) to all the elements of the page with the class "fadeInBottom". I can do it with this jQuery: let controller = new ScrollMagic.Controller(); $('.fadeInBottom').each(function () { // build a tween let fadeInBottom = TweenMax.from($(this), 1, { y: 100, opacity: 0 }); // build a scene let scene = new ScrollMagic.Scene({ triggerElement: this, offset: -200, reverse: false }) .setTween(fadeInBottom) .addTo(controller) }); Now i'm trying to do the same in plain vanilla JS: let controller = new ScrollMagic.Controller(); // FadeInBottom let fadeElem = Array.prototype.slice.call(document.querySelectorAll(".fadeInBottom")); let self = this; fadeElem.forEach(function(self) { // build a tween let fadeInBottom = TweenMax.from(self, 1.5, { y: 100, opacity: 0 }); // build a scene let scene = new ScrollMagic.Scene({ triggerElement: self, offset: -200, reverse: false }) .setTween(fadeInBottom) .addTo(controller) }) But it just doesn't work. And the console says Uncaught ReferenceError: controller is not defined at index.html: ".addTo(controller)" at Array.forEach (<anonymous>) at index.html:861 "fadeElem.forEach(function(self) {" Any help would be appreciated. Thank you!
  17. I have a similar problem and I do not know what can help you, and I can not make it work in codepen either Thank you
  18. You can see from my codepen that I have a logo on my website that fades out as you scroll down the page. I only want to do this on mobile and mobile screen sizes. I'm using scrollmagic with this also. Does anyone know how to set this up so the effect will only work on mobile and screen sizes < 768px. I'm fairly new to JS and so would appreciate baby steps. thanks
  19. Hi guys, I'm trying to do a fadein and fadeout effect on pinned sections using scrollmagic and gsap. However, i seem only to be able to do either a fadein effect or a fadeout effect only, what im trying to achieve is fading in and fading out as im scrolling and having the text still pinned while both effects applied. Here is a fiddle of what im having right now. Any help is very very much appreciated. NOTE: from the fiddle it might look like i can already achieve a fadein / fadeout effect from the 2nd section to 3rd section, where ACTUALLY the 3rd section just has a fadein effect.
  20. Hi GSAP community! A huge thank you because thanks to you we can do something beautiful! For the needs of my future company that I am develloper I need to do a scroll action like this example> https://codepen.io/GreenSock/pen/GopRwQ I get there very well except that I wish 1. Have my line continue in draw svg until the end (scene with scrollmagic) 2. Stop the blue circle at a certain position while element 1 continues to end. (scene with scrollmagic too) I can not stop my tween blue... Can you help me ? thank you in advance
  21. Hi everyone, So I'm looking at making an interactive timeline of famous people in history and there will be hundreds of people with associated data. I'm using react (gatsby specifically). I want to be able to map through the data object and render about 10 people at a time on this pathway, and it looks like they are at the back of the path. Then, when the user scrolls down say, the people move forward towards the user, on the timeline. Then when they get to the front of the timeline they fade away. In the meantime more people have appeared behind them as they move forward. What I think is a size animation, so they get bigger based on trigger points on the screen. But what the heck do I know?? Theres so much info out there I'm bamboozled. So what do you think - scrollmagic? gsap? Where do I even start yo?! Advice please!!!
  22. I'm trying to accomplish something and I'm not sure how to approach it or what direction I should go in. I am using Scrollmagic, however, I think this pertains more to fromTo()'s position attribute and timing. I have an animation where I want background images sliding up on one half and sliding down on the other half. I have achieved this. The second part is I want overlayed text fading in and out while the scrolling is occurring, too. Scrollmagic binds to the "duration" attribute, so 1 = the duration of the pinned scrolled element. The timing I have for that background images is what I had desired. I have the position attribute set to 0 so they fire simultaneously. What I don't understand is how to set up a separate, independent timeline to the same pinned element for the overlaying text to fade in and out. The duration attribute is overridden because of Scrollmagic, so what can I do? Should I try to chain together TimelineMax() tweens? Should I create 2 pinned elements and overlay them on top of one another? You can see my codePen and see I am almost there, but I feel like I am not fully grasping how the the pinned elements work with Scrollmagic or how to chain together the tweens. I have experimented with a lot of variations but my understanding is limited. Any help is greatly appreciated.
  23. Hi guys, I'm trying to animate this svg to give the effect as it lifted off the background. In this pen I tried to animate the scale and the drop shadow and the animation is triggered with scrollmagic. I have set the initial drop shadow in the CSS as advised by Dipscom here but the drop shadow doesn't animate. What am I doing wrong? If this effect can't be achieved this way is there another way to approach it? thank you
  24. Hi Guys, I've built a quick codepen for reference but basically as you scroll down the page text fades in and also the background ( bigger text) image fades in. I've somewhat got it working but I need the active class to be removed on the background image when the next one fades in. At the minute the all just stack. Thanks