Jump to content
GreenSock

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

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. 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', }, }); }); }, []);
  2. 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 🤲
  3. 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/
  4. 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
  5. 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/
  6. 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
  7. Hello, what can I do to play the animation in the codepen link in reverse?
  8. 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?
  9. 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?
  10. 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?
  11. 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
  12. Hi, Does anyone have any idea how to make an animation from this website https://teamway.io/. It is an animation of three cards, which are animated up on the scroll event. https://teamway.io/ Tnx
  13. We need to fix a particular section and scroll timeline on mouse wheel up & down with sticky title and year. section should be scrollable after timeline end. We have attached a video link:- https://www.dropbox.com/s/7bssu94w4c29cv5/SemaConnect_Motion_Timeline.mp4?dl=0
  14. Hello hello! I'm might not have an entirely question now but I would like to hear opinions to where to go in order to achieve my goal. I have a project with animations happening with ScrollTrigger. I would like to control the scrolls when it reaches the bottom or the top. - If reaches the bottom, the scroll is positioned in the top - If reaches the top, the scroll will be positioned in the bottom of the page This way the animations controlled by the ScrollTrigger will always seem in loop accordingly to the scroll. Looking into the examples I found this loop: https://codepen.io/GreenSock/pen/LYRwgPo It's very complex for what I need, but I was trying to understand it and to apply perhaps the same concept. One of the problems I'm facing is the easing, it would need to pause an animation, reset to the position y:0, for example, and finish the left easing time. Any idea how I could apply the same loop concept to my need?
  15. Hi, I want to smooth move down div with class ".box" using ScrollTrigger with "pin" value from changed position values (top and left) to base div position as in ".visible" class. I spended many hours working in this case and I still don't have any idea how to do it. The starting position of the div is changed and I would like it to move pinned down and take the base position when scrolling at the end. Please help
  16. Hi, I want to change the alphabet at the top on the basis of data, while scrolling. Assuming we are getting the list in sequential order.
  17. Hey hi, I am completely new to GSAP world, i am trying to learn many things from forum and gsap -demo, and trying from today. this trail is about horizontal scroll, have tried from demos, my plan is to achieve scroll some thing like this header | what-we-do -> work-sec -> about | contact section but after (what-we-do) section, background colors of all sections are disappearing!! have achieved horizontal scroll but its not in a proper way, Please check my code and let me know where did i missed things??
  18. Hi guys, I'm trying to make this text animation like this page: https://s.muz.li/MGI3NjRkZjJl Every single scroll and this text in circle will scroll too. But I don't have any idea how do make this. How to trigger scroll slide, and every slide change, text in circle scroll. Sorry for my bad English and thank you all for read topic ❤️
  19. After a few days of struggling with this I finally decided to post on here for help... I'm trying to create a fullscreen section on my webpage that has a background image that upon being scrolled into view gets an opacity layer over it and after that opacity layer appears the image should become 50% of width (animate from left to right) and from the left side there should slide in a white "box" with text... the opacity, and the white half with text should happen after the image reaches top of webpage and then these animations should happen one after another... My problem is that I don't know how to make these animations apear one after another and the white half with text jumps in relay fast.. it should move depending on user scroll (I tried using the scrub feature of GSAP but I didn't know how to use it corectly to achieve what I want...) P.S this is my first time using GSAP so feel free to correct and point out all the mistakes I made Here is a link to a video of the animation made in XD how it is suposed to look like... https://imgur.com/a/xJHKCdS
  20. Hi! I would like to know if a fade in effect between sections is possible with GSAP & ScrollTrigger while a section has more content and needs to be scrollable at the same time. With the help of the ScrollTrigger demos I was able to achieve the fade in effect, but I don't know how to keep this fade effect between sections while also being able to scroll the section with more content (in this case, section 2). I would really appreciate any help or hints as to where / what I should be looking for.
  21. Hello , i hope some one can help me , how i can do like this effect in gsap , not latterly same , but i want to open laptop win scroll , is there a way with gsap ? thank you in advance reference :https://www.apple.com/macbook-pro-13/ https://postimg.cc/ftRJTW5M
  22. What I'm trying to do? I've got 2 images on top of each other I want to alpha-in (opacity) via the blend-mix-mode layer with ScrollTrigger. position: relative; height: 100vh; width: 100vw; overflow-y: scroll; } img { min-width: 100vw; max-width: 100vw; height: 200vh; position: absolute; object-fit: cover; &#imageOne{ overflow-y: scroll; } &#imageTwo { overflow-y: scroll; mix-blend-mode: multiply; } } I'm having trouble just getting the images to animate with a scroll bar. I'm using big images about 5000px in size becuase I want them to be in a container with a scroll bar that I can use as the 'Scroller' for the Opacity for the image with blend modes on. What I've come up with: So far not really much luck. Here is a running view of what I've got so far. https://react-pvbx1r.stackblitz.io/ I have the project here you can see the code at the bottom is the images and the styling is in BackgroundStyle. I feel I have got the right Idea with GSAP in using useEffect to set options after the DOM has been rendered and using useRef for referencing Nodes to give to GSAP. But I don't think my problem is with React. I just cant seem to get the scroll and the animation to work. Here is the Editor link https://stackblitz.com/edit/react-pvbx1r?file=src/components/landing.js Thanks P.S I'm learning a bunch of frameworks at the moemnt so there is a chance im using quite a lot of this stuff wrong, if you spot any bits that aren't written well I would be very gratefull if you highlighted them! All the best
  23. Hello to everyone overseas. It's 2:00 in the middle of tonight in Japan. Thanks to remote work, I can work until this time. I would like to animate with ScrollTrigger, but apparently it is difficult with the demo I made. I wondered how I could do it, and what I ended up with was ScrollTrigger.proxy, but I read the documentation and didn't understand it. Well, the reason is that I can only read English through DeepL. .... If there are any kind-hearted Gsapers out there, please let me know how to get the ScrollTrigger working in the demo. If you can help me, I will pray for your health from a faraway land. Thank you very much😉 海外の皆さん、こんにちは。日本は今夜の2時です。 リモートワークのおかげで、この時間まで仕事ができます。 ScrollTriggerでアニメーションをしたいのですが、私の作ったデモではどうやら難しいようです。 どうすればいいんだろうと考えて、行き着いたのが"ScrollTrigger.proxy"だったのですが、公式のドキュメントを読んでもよくわかりませんでした。 まあ私がDeepL越しでしか英語を読めないのが原因なのですが。。。。 もし心優しいGsaperがいたら、どうすればScrollTriggerをデモで動作させることができるのか教えてください。 もしご協力いただけるのであれば、遠い島国からあなたの健康をお祈りします🙏
  24. Hello, I am quite new to GSAP and I heard a lot of good words regarding its capabilities. I am working on a website where I want to implement momentum-based scrolling as observed in the following websites: https://abhishekjha.me/ https://rekhchandsahu.com/ I spent a day learning basics of GSAP, read some posts on the forum, and did a few Google searches. I stumbled across a similar post, hinting the use of ScrollTrigger plugin. However, I was not able to exactly figure out how to achieve the same effect. Could someone guide me about creating such a scroll experience? (React-oriented solution would be highly appreciated, but VanillaJS-based solutions would also work) Thanks in advance
  25. Hey everyone, I am doing my first steps with GSAP right now. I am using it with Kirby and try to trigger some scroll events. I startet with the simple gsap.to(".box", { scrollTrigger: ".box", // start the animation when ".box" enters the viewport (once) x: 500 }); Unfortunately, the animation is only triggered when I resize the browser window. How can I fix this? Any hint is appreciated?
×