Search the Community
Showing results for tags 'scrollmagic'.
-
Hi! I'm new at ScrollTrigger (about 4 days). I have a simple question: is ScrollMagic and ScrollTrigger same?
-
Hi! How can I setPin() use this method in ScrollTrigger. My purpose is so: the scroll must be stop till the animation end. Is it possible in ScrollTrigger? Thanks!
-
Hello to all. Maybe someone has time to review and correct the script - https://codepen.io/tester_info/pen/JjNJLNV Here is a small problem, it’s incorrect scrolling and changing the directions of the scrolling (from horizontal scrolling to vertical one and vice versa). There are two problems: 1. There is a bug in the scrolling (as I understand it’s because of the vertical block takes height, such as in horizontal). 2. The last section of the "contact block" cannot be scrolled to its full width Maybe we can work differently to perform this task with mix (horizontal/vertical) scrolling sections? -
Hi Experts!! First of all thanks to GSAP and all here experts who are doing tremendous job, helps to beginners and those who stuck in code like me :), I have just start development on ScrollMagic and GSAP , I have two questions: 1. I want to auto scroll on scroll down or scroll up, for example if I am at first scene, when I scroll down, it should be go to the second scene and stop, similar behavior from scene 2 to scene 3. but in my code it is not autoscroll. I want this on mobile and desktop both but didn't get success. 2. When ever scroll down on mobile, the browser address bar auto hide, that push scene on top. Thank you in advance!
-
Hi! Not sure if this is the best place to ask help regarding this, but this forum was very helpful to get me started with gsap and scrollmagic. I'm currently working on a horizontal scrolling website with ScrollMagic and GSAP. I've stumbled upon several examples and it's working well on desktops with mousewheel function. However, when it comes to tablets where mousewheel is not applicable, the anchor navigations don't work and the results when using Chrome and Safari varies (anchor links not working on ipad chrome but works well on ipad safari). I added a drag function which is helpful for tablets, but it staggers and the animation is not very smooth. Below is the mousewheel function I used: document.addEventListener('wheel', function(e){ if(e.type != 'wheel'){ return; } let delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 1) || 1; document.documentElement.scrollLeft += delta; document.body.scrollLeft += delta; }); And here is the drag function where I based from https://codepen.io/thenutz/pen/VwYeYEE const slider = document.querySelector('html'); let isDown = false; let startX; let scrollLeft; slider.addEventListener('mousedown', (e) => { isDown = true; slider.classList.add('active'); startX = e.pageX - slider.offsetLeft; scrollLeft = slider.scrollLeft; }); slider.addEventListener('mouseleave', () => { isDown = false; slider.classList.remove('active'); }); slider.addEventListener('mouseup', () => { isDown = false; slider.classList.remove('active'); }); slider.addEventListener('mousemove', (e) => { if(!isDown) return; e.preventDefault(); const x = e.pageX - slider.offsetLeft; const walk = (x - startX) * 3; slider.scrollLeft = scrollLeft - walk; //console.log(walk); }); Unfortunately, with recent ipad update, it seems not possible to detect if the user is using an ipad or ipad pro. Is there something wrong with the code or possibly css that can fix this? Appreciate any help!
-
Hi folks, I've been using scrollmagic for my scroll based animations. And I've just started to learn GSAP ScrollTrigger. With Scrollmagic, I've achieved a scroll animation as seen below. It has 3 sections with repeated elements - a title, paragraph and a image for each section. I've used two separate timelines for scroll in and scroll out actions. I'd love to learn, how this exact same animation is done in with scrollTrigger? Is there a easy way to do this using ScrollTrigger? Thanks GSAP team for ScrollTrigger and the great support to this community.
-
Hi there, I'm new to animating using Gsap and I'm planning to integrate it to Nextjs together with Scrollmagic, however, I'm unsure of how to do it. I keep getting error when trying to use tween staggerFrom property. It keeps saying it doesn't exist. If anyone have experience the same issue as me and manage to find a fix, do let me know in the comments. Thank you. Edit: I managed to figure out how to do it. Thank you all for your help -
Hey, I should tell u guys I'm very basic at javascript let alone Jquery. I ve been experimenting with scrollmagic and gsap, but now i'm stuck and could use your help please. I want to achieve the following: When u scroll into section 2, there should start a picture slideshow on section 3. I want it to keep running until section 3 reaches the top and on scrolling then the slideshow should plit into two specific pictures that in turn go left and right, while the section is pinned. It all looks kinda ok( dunno about the code: I try to keep it as simple as possible so i really understand it:)). The only problem is the slideshow itself...i couldnt keep it looping without having somekind of delay when it finishes the first time and restarts. Then i tried reversing it, but that also gives a delay.How can i fix this? Also if u scroll really fast from top to section 3 the pictures arent loaded yet and then the left right split animation is messed up. Im guessing i could fix this by letting the animation start earlier( on pageload), but I wonder if theres another solution. (Seems weird running an animation in background while nobodys on that section) Sonny
-
Scroll-driven animations re-invented Animate anything on scroll DOM, CSS, SVG, WebGL, Canvas, whatever. Toggle playback state or scrub through animations Entering or leaving a ScrollTrigger area can make an animation play, pause, resume, reverse, restart, or complete...or you can make the scrollbar can act like a scrubber! Pin elements in place Make an element appear immune to scroll changes while the ScrollTrigger is active. This is surprisingly useful for creating slick effects and keeping your animation in view during the scroll. Insane levels of flexibility ScrollTrigger is a control freak's dream when it comes to choreographing animations, but its rich callback system also lets you accomplish things totally unrelated to animation. Directionally smart ScrollTrigger supports vertical and horizontal scrolling, and lets you check if the last scroll movement was forward or backward, and even tracks velocity! Automatic resizing ScrollTrigger elegantly adjusts to viewport size changes. You can even use function-based start/end values to run custom logic or tap into fancy responsive CSS changes. Maximum performance ScrollTrigger uses all kinds of techniques to maximize performance like throttling updates, pre-calculating intersection points to minimize effort during scroll, leveraging transforms, layerizing elements to utilize the GPU, etc. Integrated with GSAP ScrollTrigger is built on GSAP, the battle-tested standard for JavaScript animation that's used on over 10,000,000 sites worldwide including most award-winning ones. Get started with ScrollTrigger Download Documentation Examples Featured ScrollTrigger demos View all demos- 28 comments
-
- 14
-
-
-
- animation
- scrollscene
- (and 4 more)
-
I'm trying to use gsap in combination with ScrollMagic. To do so I created a timeline, but this returns an error for setTween(tween): Anyways, after importing: import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap"; I get the following error: import {gsap} from "gsap"; import ScrollMagic from "scrollmagic"; export const initPhoneScroll = () => { const tween = gsap.timeline() .to(".phone-left", 1, { x: -350 }) .to(".phone-right", 1, { x: 350 }); const controller = new ScrollMagic.Controller(); const scene = new ScrollMagic.Scene({ triggerElement: ".phone-image__wrapper", duration: "100%" }) .setTween(tween) .addTo(controller); }; How do I use gsap in combination with ScrollMagic correctly, since TweenMax, TweenLite, TimelineLite, and TimelineMax have all been consolidated?
-
I'm just not sure if I still need Scrollmagic, as I haven't used GSAP in a really long time, and it seems (at least by looking) that you don't need SM to have simple .from() animations that say fade in a div from the left and from opacity 0 to 1 (like on the homepage elements as you scroll down). I'm setting up my dependencies, and just want to wrap my head around how to do it currently. Thanks in advance, and I apologize for my ignorance!
-
Hi, I've been trying to make a menu like this: https://maxilla.jp/ where the menu is a carousel and moves when you scroll, drag, or click. I'm guessing I have to use scrollmagic for the scrolling part, but I'm kind of lost. I just want to be able to scroll and the next item follows in sort of a circular path, like a carousel without arrows. I'm not expecting any of you to tell me the answer. I'd be more than happy if you just simply point me in the right direction. Thank you all for your time!
-
Hello, I've got a simple task: animate a scrolled-control bodymovin animation in a pinned window. This is my test webpage, the codepen is also provided. In a fullsize window where I don't have to use pinning, it works well. The problem is that I don't know how to get ride of this crazy jumping effect. PS I used code partially from these GSAP tutorials and from this OKAI tutorial.
-
I've made a complex animation that works perfectly on desktop. Spent about 5 months learning gsap+sm and working on it, and with the help of this community finally got there. But, now that it's live, I discovered that it's absolutely horrible on mobile! For example, - some fixed elements that have fromTo animations, entering from outside the window erroneously appear when scrolled fast on mobile (but behave correctly when user's scroll speed slows) - or the animations that base their calculations on the 100vh miscalculate, because the mobile browser shows, but then hides the url bar and other menus (chrome on iphone) Any good answers / best practice resources that you guys can direct me to? Thanks! (Don't have a codepen example. It's live on my site, but don't know if pasting it here is frowned upon)
-
Hi, I have created a gsap animation in my website. Inorder for it to autoplay i have not specified the duration while creating the scrollmagic scene. Now the animation is autoplaying (which is the intended effect if was going for) but now the section stays locked in place since there is no duration to tell the animation that it is over. So currently, the next elements are being overlapped by the pinned element. How can i fix this ? How can i unpin the element after the animation ?
-
Hi GSAP folks! I'm brand new to animating anything on the web (aside from CSS3 animations or... ye olde Flash animations from 13 years ago), but I have a pretty solid mastery of front end dev techniques. I've made some good progress running through the forums here and elsewhere, and subscribed to the Creative Coding Club. Thanks for all the great resources! I'm working with GSAP 3, and ScrollMagic so far. I have a client that is looking to create a website that behaves like the one here: https://dpotferstudio.com/ They're looking to have the user "scroll", then the page scrolls to a new scene and plays the animation. I understand how to implement ScrollMagic, utilize setPin, setTween, etc., and setup a GSAP timeline, but i'm not sure how to implement the snap to scene THEN play the animation situation. Is this something that GSAP + SM can handle? Or with this require some additional custom JS outside the box? Thank you so much in advance for any help you can give me. I certainly appreciate it!
-
Hello When i import scrollMagic files via npm , it gives me error and says: "Uncaught ReferenceError: TweenMax is not defined" , in Gsap2 I was importing TweenMax by hand and it helped, but in Gsap3 i don't know how to do it, can you help me? Thank you
-
Hi, I've been using GSAP 2 for around 2 months for now. By using the knowledge I have I've created some basic animations using it. Now that the GSAP3 has arrived every thing looks a tini-tiny bit difficult.(but can be achieved) I know its new and i also know this is the only place i can get support. My problem is as follows, I have used Tweenmax and scroll magic to create a basic effect. Now that Tweenmax has been merged in GSAP core I cannot use the `.setTween(t1)`. As we have to Specify the animation at first in the Tweenmax and call them later using setTween. How can I achieve it in GSAP3 One more important thing as you can see the page scroll is smooth on the page. A friend of mine has given me the script to implement in the page that will make the page scroll smooth. Now i have lost contact with him. I wonder If someone could re code the script for me. I would be more than thankful Here is the codepen link for my example: https://codepen.io/Wahed98666/pen/MWWBmWa Thanks in advance
-
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!
-
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.
-
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 -
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.
-
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? -
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?
-
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
