Search the Community
Showing results for tags 'scroll'.
-
Hello. thank you for your work. I'm using GSAP with React and ScrollMagic and having troubles with IOS scroll animations. other platforms have great productivity of animations. What am I doing wrong?
-
Hi guys, I've always found animating anchor links with CSS very laborious, however up until now it's been a bit too complex for me to do it with GSAP. I've decided to take a shot at it & have so far I've spliced together an example with fullpage.js & one of @OSUblake pens. At the moment the nav dots work on click, however I'm stuck updating them via scroll. My idea was to use the if statements but so far no cigar. Any ideas how this would be done in tandem? Cheers, Smallio
-
Greetings, I'm fairly new to GSAP and I would like to know how to implement a snap method so that when the translate of the wrapper is between 0 and 20% it goes automatically to 20%, like a classic snap to a point. PS. a lot of the code has been forked from Sahil89 Thanks in advance for the help. - Gabriel
-
Hi all, First of all, thank you for the lovely community and the support given. I have spend many hours going over older topics to figure things out in the past and its been a massive help. I am working on a new project where I want to trigger animations based on a scroll position. I know this has been done many times before and after doing some research I decided that I do not want to use a plugin (like Scrollmagic for example) for performance reasons. On one of the posts here I found out that there is a newish API within JavaScript that can handle my needs called IntersectionObserver, I am using a library to make sure that I have a wide browser support for this technology (https://github.com/russellgoldenberg/scrollama). If you would look at my Codepen, you will notice that I am trying to trigger an animation on the second element based on the scroll position. I am using .progress(); to do so, where I call in a value between 0-1 based on the scroll position (taken from the Scrollama library). When you scroll down, you will notice that the box on the left moves position (as intended). The problem I am having though, is when you scroll up it does not move back. I am assuming that when using the .progress(); function, the timeline will be animated to whatever position is being fed into this? Unfortunately I can not get this to work. I have been searching on the internet for hours now and I just can't seem to find the issue. Hopefully this explains my problem clear enough, thank you in advance for any help!
-
Can someone please tell me how this site accomplished this type of parallax effect? Seems so easy but I find zero tutorials on it. It's a mystery! https://art4globalgoals.com/en/exhibition
-
I want to animate the splitting of a product image when the user scrolls to the section. i.e. When a user scrolls down and enters the product image section, I want to trigger the animation of revealing the different layers/composition of the product. Like it is done here (scroll down to the second section after landing page): https://simbasleep.com/ Any suggestions?
-
Hey, I am desperately searching for a way to play one step of my timeline when the a mouse scroll gets started. All methods that I have found trigger the events multiple times on scroll and gsap gets really confused. Is there a convient way to build something like that with greensock? What I want to build is a animation triggered webapp like these: https://theshift.tokyo/ http://www.contiducco.it/index.php?route=common/home My Code at the moment: $(window).bind("mousewheel DOMMouseScroll", function(event) { var docTimeline = new TimelineLite({ paused: true }); docTimeline.add(TweenLite.to(".lightLogo", 1, { y: "200%" })); docTimeline.add(TweenLite.to(".text", 1, { x: "0%" })); // Events when scrolled down. if ( event.originalEvent.wheelDelta < 0 || event.originalEvent.detail > 0 ) { docTimeline.play(); } else { docTimeline.reverse(); } });
-
Hi there, can anyone help me please? I have a page with a div that has a fixed position. I'd like to animate the element inside the div with GSAP when you scroll through the sections on the page with ScrollMagic. I am able to make the object move when you enter a section and when you scroll back it is reversed. How can I make it so that the object moves from it's current position to a new position when the user scrolls into the next section? I'd like the element to keep changing position when you enter a different section. I've seen many examples of GSAP and Scrollmagic in action but I'm struggling to find any examples that animate a single element through. A simple Codepen example is attached. Thanks.
-
Hello, I have been looking into getting a smooth scrolling effect using GSAP. After looking into Scroll Magic, I realised that what I want to achieve can be done using just using a GSAP timeline. I found something on Codepen which had a similar look to what I was after. I have tweaked this myself but have come to point where I need a bit of help/advice. Basically, my webpage will consist of one page made up of 3 full width sections, each one being 100vh/% in height (so 3 separate panels). The first panel will contain some information and a background image. The second panel will also contain some content but will have a background video applied instead of an image The third will be the same as the first, only with a different background image being used. What I'm trying to achieve to have the panels transition into one another smoothly as you scroll. A simple opacity swap and scale tweak so that as you scroll down the page, panel 1 fades into panel 2 and then panel 2 fades into panel 3. I am having some difficulty with my timeline I think. Currently the top 2 panels fade into each other quite well but I'm having difficulty adding the 3rd panel into the mix. If anyone can offer any advice/help on this then it'd be much appreciated. My codepen URL is https://codepen.io/anon/pen/ZobLYL
-
Hi guys. I made a pen with vertical scroll. What I want to achieve is a smooth scroll and and animation to start form top and end at bottom of the screen like in this example: http://ultra.studio/ Thanks in advance for your help!
-
Hi, I try to stop the scroll during a tween. It's not work like I expect. A text is hidden under a block (height:400px), when the scroll is at 400, this text is fading in 1s. I need a 1s disable scroll. Then scroll is working. I try this : https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily but it's look like the browser relaunch the velocity after enable the scroll.
-
Is there, or can there be an GSAP-alternative for the smooth scroll hijack like https://github.com/baptistebriel/smooth-scrolling?
-
Hi Guys, I want to add a scroll magic effect on the website I'm currently working on. First I wanted to get it working in a codepen test. I followed some tutorials and tried to figure out some codepens. What I want to achieve is to let the square move when the element with id: move is triggered. At the moment the tweening starts immediately when the page is loaded. I'm struggling with getting the code work and I don't see what I'm missing. I hope someone can help me. Thanks in advance! Ilse
-
Good day lads. I have a pressing question and I am hoping this is the right place to ask. Can anyone direct me on the general approach towards achieving scrolling like these on the following sites - http://fantasy.co/ and https://www.ramotion.com/. Generally what I want to know is how to listen for the onScroll event and scroll to an anchor or an element on the page such as can be seen from those sites. I've tried searching online but all the tutorials seem to be doing this on click of an anchor link whereas I want to achieve this on scroll. Anyone able to help?
-
Hello, fellow GSAPpers! This is my first stab at GSAP (love it!) and I'm super-eager to get your input on whether I grasped some of the basics or just totally messed it up. What I wished to create was some scrolling magic where the user controls the position of a video using the scroll wheel . Very similar to what goes on at the top of apple.com/homepod (which also seem to use GSAPs Tween & Timeline. Please have a look and give any hints on how to make this even smoother and more compatible on all sorts of devices (iPhone seems to work pretty good though). One thing that bugs me is that this is 40 lines of code. Apple's example runs one for at least 400. What am I doing wrong? TOM
-
Hi forum! How are you today? I'm working on an animation that I want to trigger and sync to the scrollbar, but start in the middle of the page, and return the scrolling the page when finished. This is what I thought about doing: [content] [ANIMATION PLACEHOLDER which is height: 100vh;] [empty section] [ANIMATION which is floating and set to display: none; and height: 100vh;] I put a scroll scene trigger at the start of the ANIMATION PLACEHOLDER section. the animation duration is set by javascript. the duration will change the ANIMATION PLACEHOLDER height to get the correct duration injected into that scroll section: pre-animation: set height of ANIMATION PLACEHOLDER to animation duration (should be 2 screens or 200vh) animation: make ANIMATION appear (I don't want the animation to scroll off screen) make ANIMATION PLACEHOLDER stick to top of it's section (when animation is set to reverse, this will make the placeholder appear in the correct place) move two boxes in the ANIMATION synced to the scroll (for now) make ANIMATION PLACEHOLDER stick to bottom (so it will appear as if you just continued to scroll) make ANIMATION disappear This seems to work for the end of the animation, but the animation (at least the set) starts as soon as the page loads. maybe it has something to do with immediateRender? I want the floating ANIMATION to appear only when the scroll trigger reaches the top of the screen. The animation itself does trigger at the right moment (only when the trigger reaches the top), but the set part happens immediatley thanks for the help Neil
-
I need to make working this functionality, basically I need to trigger the GSAP function when the element is in viewport. I'm adding the class and is going all fine, but then I need the function to work on the elements and animate them. I don't intend to use Scrollmagic
-
Hi, Any idea how to build this fancy thing using GSAP? http://pharrellwilliams.com/ They want this effect to be insert one of the section inside a one page website, the effect is user can scroll in any direction, drag to view more & also filter effect. Now i lacking idea where to start research the effect or any example to give me idea to start with this fancy stuff. or the keyword for research? Please advice anything, because i fully stuck and hopeless now Million Thanks.
-
Hey there, I came across this site from awwwards, quite like the animation. wondering if this can be done in gsap library. http://www.lespetitesculottees.com/#!en/product/la-blue-monday The way i was thinking to achieve this is to animate each of the element based on scroll position, but this will result a blank space at the bottom of the page, as the whole element shift up to its y position. Most element in example site will remain it position. Any help to point me to the right direction would be appreciated. TweenMax.to ("#text1", 1.2, {ease: Power1.easeInOut, y: -parseInt($(window).scrollTop()/1.4)} ); TweenMax.to ("#text2", 1.4, {ease: Power1.easeInOut, y: -parseInt($(window).scrollTop()/1.4)} ); .... .... Many thanks
-
Hi all, In the codepen example that is provided, the knob and the scroll-bar are linked, which is what I want to accomplish for my project. The content area is also draggable by mouse, which I want to strip out of the code, but I can't seem to make it work.. In summary: i want the knob to link to the scrollbar of my page.. that's it. (So if the knob is fully rotated, the scrollbar is at the bottom of the page etc.). I would appreciate any help. Thanks in advance!
-
I'm trying to test out a scroll hijacking method I saw on http://www.adidas.com/us/climazone. On that page, they have a fixed position container with everything in it absolutely positioned and on page scroll they translate3d the elements up -Y scroll position which I can do but they key ingredient they add is easing to that scroll tracking. So as you scroll the elements follow "recreating the scroll effect" but upon release slowly ease into their final place which is the end Y scroll position. I've found this StackOverflow question, https://stackoverflow.com/questions/25056769/how-to-add-easing-to-parallax-movement, where it talks about javascript easing mixed with parallax, however, I can't seem to figure out how to apply it to what I'm doing or what I want my end result to be. I also found this JSFiddle where it adds easing based on mouse movement that I thought might be helpful to use pieces from for easing, http://jsfiddle.net/74mnpgs7/4/. I've added a link to my current CodePen example with my starting point, any help achieving/deconstructing what Adidas Climazone is doing to add easing to their scrollY transforms would be eternally grateful! Another demo I did on JSFiddle is here: https://jsfiddle.net/416ne38h/5/ Bonus if I can use GSAP for this!
-
Hello! I have some issue with show elements. I fill svg line with help property stroke: function pathPrepare ($el) { var lineLength = $el[0].getTotalLength(); $el.css("stroke-dasharray", lineLength); $el.css("stroke-dashoffset", lineLength); } But I don`t know how can show element when fill before it (elements are hidden). They are conected only alike scene and they have absolut position. Maybe GSAP or Scrollmagic have some functions for decide this problem? Or maybe give me some hints. My code: // Init ScrollMagic var ctrl = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: 0, tweenChanges: true, duration: ScreenHeight } }); // Create scene $("section").each(function(){ new ScrollMagic.Scene({ triggerElement: this }) .setPin(this) .addTo(ctrl); }); var processLine = '#process-line'; // prepare SVG pathPrepare($(processLine)); var s4Tween = new TimelineMax(); s4Tween.to($(processLine), 1, {strokeDashoffset: 0, ease:Linear.easeNone}) .add(TweenMax.to(processLine, 0, {stroke: "#3495d1", ease:Linear.easeNone}), 0); // Create scene var scene4 = new ScrollMagic.Scene({ triggerElement: "#section3" }) .setTween(s4Tween) .addIndicators({name: "1 (duration: svg)"}) .addTo(ctrl);
-
Hi, Wondered if anyone can help? I have text and i would like it to scroll from bottom to top, going off the banner view and then leaving it on the last text for like 2.5 seconds. How would I do this?? <div class="banner"> <div id="copyScroll"> <p> Lorem Ipsum is simply dummy text? </p> <p> Lorem Ipsum is? </p> <p> Lorem Ipsum is simply dummy text of ? </p> <p> Lorem Ipsum is simply dummy ? </p> <p> Lorem Ipsum is simply dummy text of the printing? </p> </div> </div> <script> var tl = new TimelineLite(); function anim() { copyScroll = document.querySelector('.copyScroll'); p = document.querySelector('p'); tl .to(copyScroll, 1.5, {y: '-400px'}); } </script>
-
Hello, i'm trying to make splittext animation on scroll using scrollmagic, the animation works but every animations are playing when windows is load, and i want my animations works when the parent section of my "content__text" div is in the viewport Anyone can help me to fix it ? http://codepen.io/AdverisTeam/pen/aJebRJ
-
Hi, The library is great. Loves to use it to create animations. I was using it will scrollMagic library. I wanted to know if there is any way I can detect if the animated element is scrolled out of the browser viewport when the user scrolls the page up so that the animation can be reset. Right now when it is scrolled down the animation is playing in the reverse direction. I just want the animated element stays in its final state as long as it is in the screen and when the user scrolls up and the element goes out of the viewport I want to reset it so it can play again when it is scrolled down. just like the title animation in http://carv.ai
