Jump to content

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
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hi, I had been using gsap and scroll magic to show and hide image sequence. But the animations are not smooth. They are choppy. Can anyone help me. Here is the link to the page http://geekpowerdev.com/pivotal-2/ Thanks!
  2. Hi Everyone, I have been struggling for 2 mouths on this animation and I gave up and i'm asking for help to reproduce this parallax animation. If you take a look at https://www.rezo-zero.com/ home page you can see 3 images that are moving when user is scrolling. I realized that "mask" container gets bigger when is scrolled down and at some point it gets smaller, also I observed that images inside of their containers are moving up and down. I tried to solve it by using GSAP with ScrollMagic but unfortunately I have not reached my goal. I would be appriated for any help to reproduce this effect. Thanks.
  3. At first sight an easy animation causes lags and is choppy on mobile devices. In Chrome I can reproduce it by going to F12 > emulate mobile > iPhone 6/7/8. And when the page is scrolled down it's possible to see that the animated text is kind of jiggling up and down, in other words, it's choppy. GIF with visual representation
  4. Hi im kinda new to this and playing around with scrollmagic scenes and have a settup here, that follows a particular screen movement. this works nicely on the mousewheel but what id like to do is add in a next and previous scenes but cant see to figure out the best approach. any help would be much appreciated.
  5. I am new to ScrollMagic and still learning JS, I am trying to have the second slide in my codepen to last longer when you scroll through it. Right now in my #slideContainer, I've set width to 1000% because this sets the width of the pages to be expanded and have longer scroll when scrolling through them horizontally. #slideContainer { width: 1000%; height: 100%; position: absolute; } What I want is to only have this effect for a single slide only, in this case, only for Page two. I tried making another #slideContainer, which I named #longerScroll (it is commented out now) where it would be applied in a div for.page2. I tried to wrap .page1 wrapped inside the#slideContainer div and then .page3 and .page4 in a separate #slideContainer div and that didn't work so I am kinda lost. Would I have to change something in my JS and make an additional set of animation for .page2 with #longerScroll?
  6. I know scrollmagic isn't a greensock product, but I'm hoping there is a parameter in GSAP that I can adjust? I've got an animation I'm happy with, but for the speed. It's bound to the scroll, and it's a bit too fast. Is there a way for me to "slow down" the scroll? https://codepen.io/etamsasha/pen/YzKBOVQ?editors=0010 I created another animation which has a speed close to what I want by pinnning everything and moving it offscreen as the user scrolls, but that comes with its own problems: - my reveal animations are gone (their progess is bound to scroll position) - it's not really responsive. Some rows have more items than others, so different rows get different "on screen" time. - there is extra white space all around my animation https://codepen.io/etamsasha/pen/NWKJgxR?editors=0110 Any ideas?
  7. Kovsky

    Noob question here

    Hi guys, I am learning GSAP and Scroll magic for a day now, and i am really stuck at the moment ?, i have been lurkin all around the web to get a solution but found nothing. The problem seems simple maybe you might help. I am trying to reproduce the animation here --> http://akinsparker.com/ For the moment i just have this --> https://the-ramen-noob.netlify.com/index2 The thing i am struggling with is when i put a duration at 52% on my scene, if i do one scroll (on 1920 screen), its cool, i go to the next scene, but if i do a "big scroll", its just scroll to the bottom or the page. But if i go there http://akinsparker.com/ no matter the "size" of my scroll, i just go to the next scene. Bonus point : why do i have to put 52% to go to next scene on a big screen. Thank you all for your help, it's really apreciated ? Have a great weekend
  8. Hi, I would like to create a scroll controlled animation with loop points along the way at key sections. I am currently animating sprites using GSAP SteppedEase functionality to trigger animated sprites frame by frame via ScrollMagic (in Vue.js). This is working fine for one animation, however I would like to sequence multiple animations and add looped animations that auto run until the user scrolls again then start another animation / tween etc. So it would look something like this: Intro sprite animation sequence (linear) Scroll scroll Animation sprite (loop) Scroll scroll Next animation sequence (linear) Scroll scroll Animation sprite (loop) Scroll scroll Next animation sequence (linear) Scroll scroll Animation sprite (loop) ... End And it all needs to go backwards when scrolling back up the page. Here is a CodePen: https://codepen.io/philnichols/pen/NWKEYrY However I would like the pink and green tweens to loop indefinitely (independently of the scroll ) untill the next scroll marker is reached, then switch back to the linear / scroll controlled tweens. The reason is we would like users to stop scrolling and read some text on the page at certain points but still have an animation looping in the background whilst they do this, until they carry on scrolling again. Do you think this is the correct approach? Thanks in advance for any help.
  9. Hi there, I'm wondering if there is a solution to emulate a fixed background with GS ? I have created 2 versions of the same site. One uses background fixed with a swipe parallax effect here http://fressko.webflow.io/ the other uses gs to tween the slides in and out of opacity as seen here http://freshko.webflow.io/ all of this is done via scroll magic and it's ability to pin. QUESTION - is there ANY way to recreate the swipe / scrolling fixed background effect from http://fressko.webflow.io/ so I can use it on http://freshko.webflow.io/
  10. Hello I am trying to animate each section on scroll and the headline text within section 3 and 5. The headline text I would like to have another duration so it finishes earlier. But it only works if the two scene durations are similar.
  11. I am trying to implement a carousel slider of bootstrap and want the caption to animate when the slider is active. It does animate for first slide but not for others. Below is my code: // Slider var controllerSlider = new ScrollMagic.Controller({vertical: false}); jQuery('.carousel-inner .item').each( function() { var tlSlider = new TimelineMax() .from( jQuery(this).find('h1'), 3, { x: -50, autoAlpha: 0,}) .from( jQuery(this).find('h2'), 3, { y: -50, autoAlpha: 0,}); var scene = new ScrollMagic.Scene({triggerElement: jQuery(this) }) .setTween(tlSlider) .addTo(controllerSlider); });
  12. Hi there, Based on TweenMax, the ScrollTo Plugin and ScrollMagic (this is probably not where the problem came from): I wanna have a hero section on top of a page, only tweening downwards if the user is scrolling from the very beginning. Everything works as expected on my laptop (MBP). Following problem: If I use a touch-device (iPhone SE, iOS 12.4.1) and use a short touch gesture, the window is tweening to the destination withouth any issue. But if I keep my finger on the screen, the page starts to flicker and jumps back to the top after the tween finished. Is there any way to fix this behaviour? Already tried to toggle preventDefault with eventListeners on Callbacks as well as setting the position again onComplete. Since it's not working with Codepen on my mobile device (maybe because of the iframe issue since iOS11?): http://grommas-dietz.com/reduced-test.html reduced-test.mov
  13. Hi everyone! I'm trying to ease a progress bar filling animation but when it gets triggered it jumps straight to 100%. I want the animation to be triggered only once. I'm using react-scrollmagic and react-gsap. Progress bar is from Bulma framework. This is my code: <Controller> <Scene pin={false} reverse={false} indicators={true} triggerElement= "#trigger1" duration={0} > <Tween staggerFrom={{ value: 0, ease: 'Expo.easeOut' }} staggerTo={{ value: 100, ease: 'Expo.easeOut' }} stagger={0.15}> <div id="trigger1"></div> <progress className="progress is-primary" value="0" max="100"></progress> </Tween> </Scene> </Controller> The same tween without the scrollmagic scene instead works perfectly. Any ideas how to fix this?
  14. Hello ? I've set up a CodePen where I would like to have a few projects (elements) reveal one after each other on scroll - as it appears on the page. From experience this is quite easy to achieve if elements have a different class / id. What I am struggling with however, wrapping my head around, how it can work if they all have the same class. Also to keep the approach and code 'DRY'. I've done a bit of searching around, but no luck finding anything that makes sense to me to use. My CodePen currently works with all of the elements disappearing at the same time on scroll... ? Would be great to someones thoughts / experience on this one! Thank you in advance. Elzette
  15. 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!
  16. Note: This page was created before ScrollTrigger was released. We highly recommend using ScrollTrigger instead of ScrollMagic. 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.
  17. 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)
  18. 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
  19. 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!
  20. 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?
  21. 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.
  22. 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
  23. 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!
  24. 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.