Jump to content
GreenSock

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

Search the Community

Showing results for tags 'scrolltrigger'.

  • 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. I am using firebase to store the data of my website. When I am using scrollTrigger function of gsap, my website is not working. What strategy should I use to show the animation on trigger? After loading all data, if I resize my window then the scrollTrigger works. But then it is useless.
  2. Hi guys, I've seen this beautiful site https://browserhistory.squarespace.com/ and I've tried to replicate animation for a test. I started project with PIXI.js and the integration with GSAP sound good. But, how could be possible to manage the scroll and have effect in canvas? Anyone have ideas? I've supposed ScrollTrigger could be the way for snap and repeat but I'm not sure about the right trigger to use 😅 Thanks to anyone
  3. How do I create a similar snapping effect like Fullpage.js? Is it possible with the snapping property in ScrollTrigger? From what I've tried, it seems snapping is always initiated when the element has passed halfway the viewport. I would like a far quicker response, when only a few pixels have been scrolled. This is the snapping-effect I would like to create with ScrollTrigger: https://alvarotrigo.com/fullPage/extensions/parallax.html I've added a codepen to show what I've tried so far.
  4. Hi, I’m new here and I’m trying to have a fixed header fade out upon scrolling down, with a button to have it fade in and out manually (if scrolled down). I’ve got the fade-on-scroll part working but I’m struggling with the fade toggle. I thought I would create some tweens and two independent timelines to which I add the tweens (with different timing in each timeline), and then I associate one timeline with ScrollTrigger and the other one will be executed on click of the button but somehow this doesn’t work. Note, I’m using this in combination with jQuery This is the code I have so
  5. Hello everyone. I have a trouble with scrollTrigger, I want to pin #intro > .circle to top, I don't know why I pinned it but it jumps to right as you see in my codepen. I tried trigger: "#intro .container" or trigger: "#intro .circle" but they have the same errors. Please help me with scrollTrigger. Thanks in advanced.
  6. Hi, I have a container div set to 100vw x 100vh, position fixed with overflow scroll, however the trigger stops moving after setting "#path-container" to overflow:scroll. Why does this happen and what should I do to fix this? (I need the container div to be 100vh because I want to "squeeze" only what's visible) Thanks in advance, much appreciated!
  7. I'm building a site with horizontal scrolling for the whole site, but have been having a heck of a time doing the whole timeline pretty manually. I'd LIKE to have just a single foreach() which looks for all the <section>s on the page, and animates them one by one, like I have in this codepen: https://codepen.io/DouglasGlover/pen/gOrwbGV Problem is, as you can see, I'm currently adding them to the timeline one at a time, and using some basic math to say "this section is 60% viewport width, so start the NEXT animation at "-=" + 1.4 (duration of previous "out" animat
  8. It is not working properly. Let me explain here is code https://github.com/mishangoti/scroll-component here is video explanation of the issue https://www.awesomescreenshot.com/video/2250268?key=4b667fca8dbad42e89d408e58a1b2034 1) what ever page route I refresh, animation on that page work very good, but when I navigate to other route from that route it does not work properly, However if I refresh that route it works good but in other route it does not work as desired. I have given video link for more detail explanation. Please help me solve this issue, I can
  9. It appears as though the scrollerProxy is initiated multiple times after routing which causes the matrix 3d animation to jump from -232213 to 0 and back. I think this is because the nuxt instance is kept while routing between pages that also use the _.vue page template but I cant figure out how to force it to forget the past scrollerProxy 😢 Any advice as to how to initiate smoothscrolling in Nuxt? // _.vue template <template> <div> </div> </template> <script> import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.r
  10. Hi, I have had this issue in multiple sites where I am using scrolltrigger and animating the y property. This is what happens on an <a> tag for example (see screenshot). I have had this issue also appear on normal <div> that have border properties. I have also tried to replace the border with outline for example but same thing happens. When I hover over it, the border corrects itself and looks fine after that. Also when you change some properties through "inspect element" in chrome for example. The error also occurs in Microsoft EDGE, but have not seen it in
  11. Hey, I'm a very newbie, I want to pin a section (section 1) with 100vh length and pinSpacing: true to play an animation with scrub, after the animation done, I want to pin section 1 again with no pinSpacing to get the next section overlaps scrolling in. could you guys show me how to get that result? I've tried some ideas but still haven't got the effect I want. Thank you very much!
  12. Hi guys, I just built this carousel using ScrollTrigger. Scrolling down the container does two things : (1) it translates the inner grid on the x-axis and (2) it changes the scale of the images based on their location (the closer to the left it is, the bigger it becomes—up to a certain point). In order to get (2) working, I used an onUpdate callback. Every time the progress updates, the callback loops through the images array and determine each of their scaling value based on their index and the current progress value: const step = 1 / (images.length - 1); g
  13. Ola! I'm working on some basic fade-in effect with scrollTrigger and I'm encountering an issue with the last component not being displayed when reaching the end of the page. As you can see from the markers, this is not an issue with the plugin, the start position of the last section is never reaching the scroll-start. To avoid this issue I've added a listener on the scroll and when reaching the end of the page, I'm forcing all the tweens to be played. Would there be a better alternative to this? I was looking for a method from ScrollTrigger to activate it manu
  14. Hi people, Anybody have problem with Nuxt, Vuetify and ScrollTrigger - wrong start position for trigger? Start is set to "top top" but with markers: true I see that start is above trigger div element with a value that depends on width of page. As trigger div element is positioned lower on page, gap is getting bigger. Same code works fine in Vue. Even most simple ScrollTriger example behaves same in Nuxt - start is above trigger element (if trigger div is in the middle of page, not top). I think that this probelm have something to do with Nux
  15. Hey, https://codepen.io/GreenSock/pen/896549f0a83297debd9111fe9b205a97?editors=1010 Based on the case below, I tried to build a custom scroll bar for a scrollable element with fixed sizes. It works ... But if you change the window size, if the scroll progress is not equal to 0 or 1, then the drag function is disturbed. https://codepen.io/mikeK/pen/c889651f79b9848c71f4a918e94471a8?editors=0010 What am I doing wrong? Mikel
  16. I don't know if this is a bug or there's a lacking on my understanding how SCROLLTRIGGER pinning works. Cause apparently, I'm having this annoying issue of page width increment (to 100%) when pinning the section. So basically, the problem is the second I set the width to 100vw. So, whenever I reach the SCROLLTRIGGER start, and it pins, it just expands the whole section to the rest of the horizontal space of the window (there is somehow additional widths, even though I never set anything exceeding 100vh 🙄). Please, help me and every other people who are facing the same issue us
  17. I have an issue with a pinned div containing svg that shifts on the start of the scroll. I recreated the demo version, but it is more visible in the original version. I have read the docs and all other posts on the topic I could find and tried pinType: "fixed" But it didnt solve the issue for me. Thank you in advance! Screen Recording 2020-12-22 at 19.04.57.mov
  18. Hi guys ! I'm looping on an array of elements to toggle a class on these elements each time they enter the viewport but I don't think my code is optimized. Is there anything I could do to simplify this : const buttons = gsap.utils.toArray('.btn'); buttons.forEach((btn) => { gsap.from(btn, { scrollTrigger: { start: 'top bottom', end: 'bottom top', trigger: btn, onEnter() { btn.classList.remove('disable'); }, onLeave() { btn.classList.add('disable'); }, onEnterBack() { btn.classList.remove('di
  19. Hey guys, Started playing a bit with ScrollTrigger and loving it, great job! Is it possible to pin elements taller than the viewport and make them scrollable though? Like this: https://abouolia.github.io/sticky-sidebar/ check out the "Scrollable Sticky Element" example, try scrolling up and down to see what I mean. Fingers crossed
  20. Hi! When I remove the markers property or set it to false, the ScrollTrigger stops working. Why? PS: With markers it works let tl2 = gsap.timeline(); tl2.from(".root--offer__header", { xPercent: 650, }); ScrollTrigger.create({ animation: tl2, trigger: ".root--offer__header", start: "top top", end: "+=4000", scrub: true, pin: true, anticipatePin: 1, duration: 2, ease: "none", markers: true, });
  21. As you see in codepen link the animation work but not well, when you make a scroll the red element move as normal, also the blue element works normally, but if you continue scrolling, you will arrive at to step, you can't look at the animation. I want to move it as a position fixed moving my scroll.
  22. hello guys, i'm facing a problem with my code, trying to use the scrollTrigger function to scroll through brands in section three, but the scroll is flipping the fullpage sections, even though i disabled autoscroll and tried normalScrollElements but with no success please any help ?
  23. Newbie here, I'm using Vue (3.0) and I'm trying to get started with GSAP and Locomotive Scroll but ran into a couple of issues. I've tried using some sample code(bottom of post - mine is without the code to scroll images) to get smooth scrolling implemented but I've found that it adversely affects the layout of my page. A page is a div element, styled by: .full-page { min-width: 100%; width: 100%; min-height: 100vh; } So the structure of the application is: <html> <body> <div id="#app"> <div class="full-page"> ...
  24. What`s up, GSAP! I`ve briefly looked through docs to find any mention of the same issue, but seems like i need to ask it here. It looks like pin-spacer (wrapper of pinning element) doesn`t copy exact same CSS styles from pinning element. First of all I`m interested in z-index, as I`m developing complex sections` behaviour with revealing, pinning, swapping and covering sections. And missing of z-index in pin-spacer breaks some of my hacks. Currently, I`m using 3.6.0 you guys gave me a month ago to solve other issues. But it looks like previous versions doesn`t clone z-index as well.
  25. Hello, I'm using Gsap Scroll Trigger with my all my entire pages. I have multiples sections. Every section has different child element. I want to know if it's possible to handle specific part of sections (for example, 15% of a specific one, the same as I do with normal vertical scroll ). But I don't know how to do it and I don't know if it's possible. Praticale example: In the codepen i want something like this this: Apply different animations on different child element of the same parent (.red) relatively to the actual parent that is in the viewport. Thanks for your
×