Jump to content
GreenSock

Search the Community

Showing results for tags 'scroll'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. So I am trying to replicate an effect I recently saw (the inspiration for what I am trying to build can be found at the top of the page here) and managed to figure out the endless slider effect (yep, I am definitely far from being a gsap master). But now that I have the endless effect, I want to figure out how they sped up the effect on the users scroll. I linked what I currently have built via CodePen. I found this post that effects the speed of an animation using ScrollTrigger but it was recommended to use the containing div and animate that which doesn't really work for this case, at least I don't think it does but I am open to being wrong. I would appreciate any insight on how one might be able to adjust the slider scroll speed on scroll down. And before I end this, thank you to everyone in the GreenSock team. This library is incredibly powerful and unbelievably helpful. I just wish I would of tested it out sooner.
  2. I wrote the following code to change the shape of svg, but this code has a problem. I want the color of #rect to change at the same time every time atr changes. Is it possible to do the same code with another solution? var tl = gsap.timeline({}); //2 tl.to("#Tear", { attr: { d: First } }); //3 tl.set("#rect", { attr: { style: "fill:#FB7185" } }).to("#Tear", { attr: { d: Second } }); //4 tl.set("#rect", { attr: { style: "fill: #38BDF8" } }).to("#Tear", { attr: { d: Third } }); //5 tl.set("#rect", { attr: { style: "fill: #A78BFA" } }).to("#Tear", { attr: { d: Fourth } }); const scroll = ScrollTrigger.create({ trigger: ".J02ig", pin: true, scrub: 0.5, start: "top top", end: "max", animation: tl // onToggle: self => console.log("toggled, isActive:", self.isActive), // onUpdate: self => console.log("direction:", self.direction) }); scroll.scroll();
  3. Please check the codepan , i want to scroll the content between the fixed div. but as of now the div is fixed but the inner content is not scrolled.
  4. https://canal.luxurycollection.ae/ For example, please look at this site. When you go to it, you will see that when you scroll through the first block an animation (rotate) is triggered for the element on the left until the end of this block. I can also start scrolling in reverse order and the animation will also be triggered back. How can I do this? I tried to do something, but it did not lead to anything :( I would be happy for any help! Whether it's ready-made code or if you can just point me in the right direction by telling me what to use for it. Thanks :)
  5. Hello, I am running modal box and menu in codepen. However, the scroll moves during this process, how can it be made active and passive? Can you do it on Codepen example, I tried a few times but I couldn't. Thank you in advance.
  6. Hello, I'm using companets like this in my project, but the page can be scrolled up and down. I definitely want to lock the scroll, I just want it to return to normal when I turn it off. Can you help?
  7. This is probably really obvious, but i can't make it work. Basically I adapted the code from the given codepen to my react project but I can't get it to work in the way I want. What I'm trying to do is make use of image sequence animation triggered by scrolling while also snapping to full screen sections. I've managed making these work individually but when I tried combining them is when I ran into trouble. The conclusion I came to is: the way I have it setup now, for the scroll snapping to work is body overflow:hidden and everything is taking place in a container div configured for snapping which is scrolling. Now the canvas animation is not triggering because it is expecting for the window to scroll which is not actually happening it is the div that is. I think the solution should be me directing and giving the right scroller to ScrollTrigger but I can't get it to work. I'm going to share the code below and I thank anyone in advance for any help provided. index.css Home.js Solutions I tried are a combination of the code below: I should mention that using this code above made the animation play trough once upon refreshing the site but it would not respond to the scroller. I'm sorry if the post is breaking any forum rules and if I didn't explain the problem quite as well as I could've.
  8. hello i am jignasha please someone tell me how gsap3 scrolltrriger work with angular framework , i want one ball is moveing on scroll event in website
  9. HI, I would like to make an animation which will scroll inside a section. And the BG image will remain sticky until I complete my second scroll. But, I'm unable to complete my animation and need help badly. So this is my need- 1. Main section will remain until I finish the nested Scroll. 2. When The nested scroll first appear It has to an Scale up effect. There will be no effect for the rest. 3. Only 1 nested scroll can be pass at a time. No matter if it's slow or first scroll. 4. There will be an indicator which will be automatically marked. I mean which no of slider is viewing now will have an active color. I've tried the following but it skips the section. https://codepen.io/aaronmeder/pen/vYZGyJq Live Demo URL can be found http://18.136.138.101/ (Under the Globe Section)
  10. Hi, I am trying to animated section with scroll created as components in React. You can find a similar effect to what I am trying to achieve here (the text on the right or the images inside the phone). In my animation I would like the headingOne to appear from the bottom of the screen and fade away towards the top of the screen, followed by the headingTow that should come from the right or left followed by the cards while the section is pined and only after the animation finished the normal scrolling would begin again. Doing this I have encountered some difficulties. One of which beaning an error that says ";" expected while using the TweenLite and I don't really see why... Also I am not use that I used gsap correctly. For the headingOne I would like to display it none, but only after the fade away animation finishes so the headingOne would come into the middle of the screen. I would greatly appreciate is you could take a look at the code pen and point out my mistakes. Thank you!
  11. Guest

    Video Scroll Animation

    Where can I find a tutorial or maybe docs or blogs where I can learn how to make a video be animated on scroll. Like every time I scroll the video runs 1 or 2 frames. I am also interested in animating movement of elements on scroll. Let's say I have 3 card and as I scroll the care apea one by one when I scroll from a position of X= -100 to X= 0 while the hole scrolled is sopped. In other wards when the uses get to a point the normal scroll stops and as they scroll the card move from right to left raveling themself and moving into their position and ten the normal scrolling behavior start again. An example would be https://zoox.com/ . Thank you!
  12. Hello teachers, I have this example, I need help with a combination of animations. The idea: With normal scrolling it stops at the top of the section (done) and with further scrolling it changes the content of the .container-sliders-wrapper (done) but i need the following animations: the img goes to the top and disappears with the fadeout and the text just fades and changes with the other text content on the slide I put a link with the real example: https://drive.google.com/file/d/1OKG0Ads2NYR1k073ERUrHwTQB9KuPofn/view?usp=sharing I hope I explained well and you can help me PD: I use vh value, please open the codepen an full view
  13. Hello, I want to create this distortion effect when scrolling: video of the animation I'm a complete beginner to GSAP like I don't have any basics, but I can learn quickly with the appropriate code, and I'm sure it's possible to do it with GSAP. I already looked at some topics on this website, with the property skew, but it doesn't skew from the center of the image. Furthermore, I want this animation to be vertical, not horizontal like in the video. If anyone can help me with an easy-to-understand solution, that would be awesome.
  14. Hi all, on this demo, particles images load correctly but.. the interactivity seems totally gone: touchstart animation / mouseenter got strange issue (doesnt start at all) while adding gsap. Is something related how the script / canvas works? (Maybe because the canvas needs to see images as soon as possible (starting after img-loaded) , while using scrolltrigger to show and hide elements container cause a conflict?). I can avoid using scrolltrigger and show elem as is, but I was tryin' to make each of them, fadein staggered with GSAP. Thanks for any help
  15. Hi, Is there any way to target another element for adding class while the trigger elements enters and exits viewport. Like a target prop or something. Or just add animation to another set of images. In the below code I am trying to add "active" class to the target element ".anim-phone-image" but i guess there is no such property 😅. Please help me out useEffect(() => { const scrollTexts = gsap.utils.toArray('.anim-text'); scrollTexts.forEach((item, index) => { tl.current = gsap.timeline({ scrollTrigger: { trigger: item, scrub: true, start: 'top 30%', // start when top of trigger target hits 50% point of viewport end: 'bottom 10%', toggleClass: `active-${index}`, markers: true, target: '.anim-phone-image', }, }); }); }, []);
  16. Hello. Tell me please. The page uses custom scrolling. Because of this, the animation does not work when scrolling through the page. How to bind a block with a scroll to animation? 👻 Perhaps the answer has already been given. but I'm probably not looking well, if there is, please send a link 🤲
  17. Hi, here is how I can make the header appear only when the scroll moves up. I think smooth scroll is preventing this because of its own page calculation. I can see it when I go to the top of the page. I want to see the header when I scroll up. Like the example here; https://aydindoganvakfi.org.tr/
  18. Hello, I want to do more than one pin operation, but it does not give a proper display in the second iteration. I want to see the visual content again after the pin content and then pin the content again
  19. Hi, I am new in GSAP, I want to create a section where text will change by animate along with background image. Please check link below and go to section which is in screenshot. You can check this section after visit on link below. Thanks in Advance! https://www.nicolenero.com/
  20. Hello, the structure i want to make is actually auto height at the top and layers from the bottom, and then the last part is independent of the layer. For this I am sharing the image
  21. Hello, what can I do to play the animation in the codepen link in reverse?
  22. Hello Everyone, I'm new on GSAP and Interested on scrollTrigger. can I set scroller height? in this case I want the navbar doesn't hide when the first scroll but, until the end marker without "position: fixed". Can i do it?
  23. Hello, there is a reference scroll animation in the codepen link. Here, I want both the image and the caption text to appear as zoom in & out, how can I do that? Fade in & out right now I don't want that. Can you help me?
  24. Helo, i want to disable smooth scroll in mobile browser, because scroll usability is seriously reduced, locomotiv scroll can do this by default. but it doesn't suit me because I use gsap library. I wonder if a scroll without animation is possible for mobile browsers?
  25. Hello, I wanted to do a development for my own project, but i ran into a problem. i am using Luxy Smooth Scroll in my project. I wanted to change the image by scrolling with the gsap pin, but Luxy Scroll is causing a problem and I couldn't solve it, can you help? This is my reference codes https://codepen.io/Danish_Khurshid/pen/jOByPGq
×