Jump to content
GreenSock

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

Search the Community

Showing results for tags 'scrolltrigger'.



More search options

  • 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

Found 108 results

  1. Hey guys, Loving the ScrollTrigger plugin I'm building a horizontal scroll site, however at a certain point I would like to switch to vertical depending on the viewport. Currently when the condition is met I try to kill the ScrollTrigger like this: ScrollTrigger.getById('id').kill(); And then re-initialise the whole timeline including ScrollTrigger like this: this.tl = gsap.timeline({ scrollTrigger: { id: `id`, trigger: this.$refs.wrapperRight, horizontal: this.isHorizontalScroll, start: "10% 90%", end: "100% 0%", scroller: this.containerEl, markers: true, toggleActions: "play reverse play reverse" } }); This works if the "this.isHorizontalScroll" value stays the same. However if it changes, the markers that determine the start and stop position of the trigger scrolling along with the container, and i'm unable to get it to work. I can make a codepen demo if needed however maybe there is another way to kill the ScrollTrigger as it looks like some values are not cleared. Thanks in advance, Cheers, M
  2. 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.registerPlugin(ScrollTrigger) export default { mounted() { this.smooth() this.$forceUpdate() }, destroyed() { // used to kill the ScrollTrigger instance for this component this.expand = false }, methods: { smooth() { if (process.client) { window.scrollTo(0,0) const locoScroll = new this.LocomotiveScroll({ el: document.querySelector('.smooth-scroll'), smooth: true }) // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) locoScroll.on('scroll', ScrollTrigger.update) ScrollTrigger.scrollerProxy('.smooth-scroll', { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y }, // we don't have to define a scrollLeft because we're only scrolling vertically. getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight} }, // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element). pinType: document.querySelector('.smooth-scroll').style.transform ? 'transform' : 'fixed' }) // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener('refresh', () => locoScroll.update()) // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh() const headerItems = ['.header__logo', '.nav', '.header__trigger'] if (!this.isTouchDevice()) { headerItems.forEach((item) => { gsap.to(item, { scrollTrigger: { trigger: '.header', scroller: '.smooth-scroll', scrub: true, pin: true, start: 'top', end: document.querySelector('body').offsetHeight, pinSpacing: false, }, y: document.querySelector('body').offsetHeight, transformOrigin: 'center top', ease: 'none' }) }) const largeMedia = document.querySelectorAll('.large-media.no-controls') if (largeMedia) { largeMedia.forEach((media) => { let mediaItem = media.querySelector('video') if (media.querySelector('img')) { mediaItem = media.querySelector('img') } gsap.to(mediaItem, { scrollTrigger: { trigger: media, scroller: '.smooth-scroll', scrub: true, start: 'top', end: 'bottom', }, y: '100%', transformOrigin: 'center top', ease: 'none' }) }) } const nextCase = document.querySelector('.next-case') if (nextCase) { gsap.to('.next-case .large-media', { scale: 1, opacity: 0, scrollTrigger: { trigger: nextCase, scroller: '.smooth-scroll', start: `top-=${window.innerHeight / 2}`, end: `bottom-=${window.innerHeight}`, scrub: 1, } }) gsap.to('.next-case__background', { opacity: 1, scrollTrigger: { trigger: nextCase, scroller: '.smooth-scroll', start: `top-=${window.innerHeight / 2}`, end: `bottom-=${window.innerHeight}`, scrub: 1, } }) gsap.to('.large-text-header', { opacity: 1, scrollTrigger: { trigger: nextCase, scroller: '.smooth-scroll', start: `top-=${window.innerHeight / 2}`, end: `bottom-=${window.innerHeight}`, scrub: 1, } }) const observerTrigger = document.querySelector('.next-case__observer-trigger') const onIntersection = (entries) => { for (const entry of entries) { if (entry.isIntersecting) { this.loaded = entry.intersectionRatio if (entry.intersectionRatio > 0.95) { this.background = true if (!this.expand) { // window.location.href = nextCase.querySelector('a').getAttribute('href') // goor, doch effectief this.$router.push(nextCase.querySelector('a').getAttribute('href')) this.expand = true } } } } } let threshold = [] // create array with numbers between 0 and 1 for (var i = 0; i <= 100; i++) { threshold.push(i / 100) } const observer = new IntersectionObserver(onIntersection, { threshold }) observer.observe(observerTrigger) } } } }, isTouchDevice() { try { document.createEvent('TouchEvent') return true } catch (e) { return false } } }, } </script>
  3. Hey guys, I'm having some trouble on something this evening, was wondering if you guys could help. Given that this uses a 3d model, I can't attach a codepen unfortunately. But I'll do the best to include all relevant code snippets and give all the details I can. I've been working on a website that uses scroll trigger to move content around, and also to move around this 3D car model that I have. I have 4 different slides, and for the sake of simplicity, I've gone ahead and recoloured them. Slide 1: Blue, start slide Slide 2: Pink, slides in from the right Slide 3: Yellow, slides in from bottom Slide 4: Green, slides in from the right Now Slide 4 is the main culprit, I'm trying to move this car around to have the car in the 4th slide look like the image below: However, the transition to the image is a little less than sleek. I've attached a video of how the transitions currently look, scrolling between these different slides. Ignore the music, I just recorded this very quickly on my ShadowPlay. Now let's talk about the code I've got. I'm trying to use ScrollTrigger to move between all of these, and I created a variable for a timeline just so I could keep it all in check (or so I thought). Here's what I have thusfar. scene.rotation.set(0, 9.8, 0) camera.position.set(-1.2,0,5) let car_anim = gsap.timeline() // Slide 2 car_anim.to(scene.rotation, {y: 4.79, easing: Power1.easeInOut, scrollTrigger: { trigger: "#slide2", scrub: 1, }}, 0) car_anim.to(camera.position, {x: -0.1, easing: Power1.easeInOut, scrollTrigger: { trigger: "#slide2", scrub: 1, start: "right right" }}, 0) // Slide 3 car_anim.to(scene.rotation, {z: 1.6, easing: Power1.easeInOut, scrollTrigger: { trigger: "#slide3", scrub: 1, start: "top top" }}, 0) // Slide 4 - The problem child car_anim.to(scene.rotation, {z: 0.02, y: 3.1, easing: Power1.easeInOut, scrollTrigger: { trigger: "#slide4", scrub: 1, start: "right+=2500 right" }}, 0) car_anim.to(camera.position, {x: 0.16, easing: Power1.easeInOut, scrollTrigger: { trigger: "#slide4", scrub: 1, start: "right+=2500 right" }}) I start out with setting a base camera position and scene position. The scene position refers to the car, and the camera just refers to the camera. The first three slides work well. I have another video somewhere of all of those working just fine. I'm just having trouble of smoothly continuing the movements of the car. It's not a ThreeJS issue I don't think. I'm pretty sure it's just the start of the scroll trigger, given that the other ones have worked fine. I guess it's as I've started making more complex movements. So yeah, how do you think I could get these working at all? I'm not entirely sure what I'm doing wrong to be very honest with you. Thanks in advance, and sorry for the lack of codepen - it's a little hard to do with all the technical set up. UPDATE: Just an edit after I've played around with it a bit more. I think it's becoming less and less of a gsap issue, but I'll keep this thread up in case anyone else knows how to solve it / it can be used as a future reference. It seems as if when I modify a different axis more than once (i.e. the y-axis), it updates the value weirdly. I don't have console log proof, but I messed around with the 4th slide and it seems to transition fine when I set it to affect the x-axis - a property that has yet to be used with the scene rotation.
  4. Hi everyone, I would like to reproduce the Apple AirPods effect of this pen with ScrollTrigger: https://codepen.io/j-v-w/pen/ZEbGzyv Here is an example made with scrollMagic: https://webdesign.tutsplus.com/tutorials/how-to-animate-a-coffee-drinking-sprite-with-scrollmagic--cms-24795 Can you help me join these Pen by using the new scrollTrigger Plugin? Thanks so much
  5. Hi everyone, I'm looking for few days how to use the gsap plugin ScrollTrigger and ScrollTo together to create an automatic scroll from section to section as fullpage does. I think I'm understand well how ScrollTrigger works but I can't find good online exemple of ScrollTo... So I can't really figurate how make it Here is a good exemple of what I want to do : https://codepen.io/Jean-Tilapin/pen/vwmOqd but I think they use an old version and as my level in js & gsap is not really good I can't find how recreate this in my codepen exemple. Thanks a lot for your help Have a great weekend to all
  6. Hello, so I created a new topic regarding my problem. Basically I have a structure similar to demo in codepen: https://codepen.io/luk-z-horec/pen/RwrYmvR What I need is to animate elements inside every section when they appear in the viewport. Now they animate all in the same time. Next question: it is possible in onEnter callback also have an element which trigger onEnter callback? Thank you for your help.
  7. Loving ScrollTrigger but seem to have hit a bit of a snag. Is it possible to reset the animation when the element is below the viewport, instead of below the start position? So for example if I wanted to animate the width of an element from 0 to 100% when it reached 50% up the screen, I'd like it to remain at that width until I scroll back up and the element is completely out of view below the viewport, and then reset/restart. As it is, in this example setting the last toggleAction parameter to reset causes the element to disappear while its still in the viewport. It would be a similar issue if I wanted to fade in an element when it enters the screen. It would be nice to be able to trigger the fade-in a little ways up the screen, and remain on the screen until the user scrolled back up past the element again, and then have it fade in all over again if they started scrolling down again.
  8. 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.
  9. Hi! I'm trying to create an animation with few stages of pinning and multiple items being pinned. And I need help with that In my example animation can be divided into two stages. In the first stage, red dots are pinned, arranged and join the blue screen. Then, in the second stage, blue screen is pinned and fully shown. What I'm trying to achieve now is for the red dots to be still pinned (after their animation is finished), along the blue screen, up until the screen animation is finished. Later on I'll add alternating animations of dots, screen, and different elements, but I narrowed it down for the sake of making the example simple. I'd much appreciate any help.
  10. ScrollTrigger Matchmedia function does not work as I expected. It works successfully when i scroll without resizing screen. Please check my codesandbox link (https://codesandbox.io/s/blissful-franklin-j6rdo?file=/src/contents.js) here. Once I resize the screen to tablet view (~1024px) or opposite way from tablet view to Desktop view, - ScrollTrigger behavior does not work as initial setting. - Having console error message with `GSAP target null not found` As I found out the simple examples of matchmedia was working with resizing. But, my code does not work. Once resize the screen, seems scrollTrigger is getting confused. What did I miss on here?
  11. Hello devs , i'm trying to implement smooth scroll and scrollTrigger pinning on same view port. As the smooth scroll works by disabling scroll and translating -Y , pinned div also translates instead of pinning. Reference : https://codepen.io/wooooosky/pen/LQNZgv Can anyone give me a solution , would be helpful. Thanks in advance.
  12. Hi, Can someone help please!!!! I am currently having an issue with Barba + GSAP on page transition. It work fine on the first page, when clicking on different link the scrollTrigger doesn't work... it load the animation before scrolling to the viewport. I've tried to Reset & Kill -> contentTl.kill(true) but it didn't work. Thank you. That's the link for codepen -> https://codepen.io/william_bella/project/editor/AxLLKq
  13. Hi, I have a question about the ScrollTrigger Image lazy loading. The demo sample uses HTML markup like this: <section class="preloadSection"> <div class="deferredImageContainer"> <img class="deferredImage" width="1200" height="600" src="https://picsum.photos/id/237/20/10" data-src="https://picsum.photos/id/237/1200/600"> </div> </section> Is it possible to do this much simplified? As follows: <img class="lazy" src="https://picsum.photos/id/237/20/10" data-src="https://picsum.photos/id/237/1200/600"> Thanks.
  14. Hi all! I'm new to GreenSock and I haven't been able to find a similar issue in the forum. Does anyone know if it's possible to stop Scroll Trigger when ScrollTo is actively scrolling? I have navigation links which use `ScrollTo` to navigate to specific sections. I also have a section which I want to pin and show an animation inside. I'm looking for a way to pause `ScrollTrigger` when the user clicks a navigation link that utilizes `ScrollTo` - but have `ScrollTrigger` activated when the user is scrolling the page. Thank in advance for all the help :)
  15. I am trying to make a horizontal parallax slider for my website but not able to implement it correctly. I looked out other parallax examples but they all were vertical ones. But I want to scroll horizontally with vertical scrollbars. So, I tween the 'x' property of different elements which different scrub value. The first tween works fine but in second tween the elements are already scrolled at starting position. The 'x' value to scroll is static but will change it to work dynamically. Please help me with this one.
  16. Hi guys, is it possible to fade an element in, after scrolling lets say 120% of the viewport? The element is a fixed element (back to top button). I tried using the position of the .header element (top navbar) and trigger the animation, when the .header is 500px out of the viewport. gsap.to(".js-back-to-top", { scrollTrigger: { trigger: ".header", markers: true, start: -500, onToggle: self => console.log("toggled, isActive:", self.isActive), }, autoAlpha: 1, }); thank you for your help
  17. Hi guys, I'm kind of confused about toggleActions at this moment. In my case it doesn't seem to work. What I'm trying to achieve is moving my containers by a certain number of pixels when enter the scroller-window and then moving back to its initial position when the container has left said scroller-window. But you can see from my demo that when scrolling the previous element is not reset to its initial position. What am I doing wrong? Thank you for your help and thank you for this amazing tool!!!
  18. Hello! This might be a stupid question, but I have a timeline animation that is being scrubbed on scroll using ScrollTrigger. I have a video that I want to toggle whether it is playing or not so I was using onEnter and onComplete which is working, however when I scroll back up I want the video to start playing again but I'm not sure how to achieve this. A basic CodePen is below. Thanks!
  19. Hello, thank you for all your work, in ScrollTrigger docs its said that resizing runs onrefresh and that recalculates, but it doesn't work in codepen provided, it changes the value in console log but the property isnt recalculated accroding to to the offset height, also when i have display: none on triggering element it doesnt init even when i resize to the width when display is visible.
  20. I'm building an SVG animation and I'm having trouble figuring out how I can incorporate a ScrollTrigger for my panels. My goal is to scale up the panels to their full size as far as the user is scrolled to a position that will allow them to view the animation. I'm not quite understanding how to do so in such a big timeline as this is the first time I'm creating something that is more than 10 lines of code with gsap. Any advice? I apologize in advance if my code is sloppy and not as efficient as it could be. Here's another codepen I made to try to test it out with less animations going on. https://codepen.io/Cptain/pen/wvMbQdO
  21. Hi, I'm struggeling with the new scrolltrigger. I have a div with an SVG map in it. Upon scrolling I pin the container. Now when i scroll 3 section DIV's pass by and i want upon entering of each section to tween the #map to a specific point. That all seems to work. When i start the map resets to 0,0 .... when section 2 enters the map continues to the proper coordinates. BUT when section 3 enters the map seems to reset to 0,0 first before tweening to its proper location. Why is it not using the current location (set by section2) as the starting point for this tween? I made a pen to illustrate
  22. I am looking for examples of controlling a canvas animation with ScrollTrigger. The documentation suggests this is possible, but not sure where to start. I am creating banner ads with Adobe Animate and would like to use ScrollTrigger for presentation effects on my website. I have a video looping on my home page and would like to use ScrollTrigger to control the video. The video is currently streaming from Vimeo but I can make it in Animate as a canvas animation similar to the banners. I use GSAP from inside Adobe Animate for the superior easing effects and more precise controls. https://roguemotion.graphics
  23. Hi, I have a question regarding using ScrollTrigger.matchMedia in multiple places within a web app (which will include using the same breakpoints in multiple places) To paint the scenario for you, so you have some more context. I have a Nuxt.js web app, that is using ScrollTrigger for various animations, which are setup within individual components throughout the app, which allows me to only create / destroy ScrollTrigger and gsap instances where needed to keep things nice and tidy. I noticed in the video tutorial for ScrollTrigger.matchMedia, that declaring this object once seems to be the recommended way, and then using the media queries as keys - e.g '(min-width: 800px)' pointing to a function which would handle ALL the ScrollTrigger instances for each breakpoint. My question is, is there a specific way that I should be using ScrollTrigger.matchMedia() within a component, and setting up the gsap / scrollTrigger animations only related to that component. I have been playing around with this for the last few hours, and I keep running up against issues, as I am presumably using it incorrectly. UPDATE: Small Codepen example in the below reply. Apologies in advance as I haven't included any specific code in this post. I am just seeing if there is a simple way of achieving this with ScrollTrigger.matchMedia, or if I need to setup something a bit more custom to acheive this. If its better for me to setup a small repo / codesandbox with a simple example showing exactly what I mean, let me know and I will reply to this post with it P.S Just wanted to say that ScrollTrigger is the absolute bomb, and I've been using it since the day it launched! Thanks in advance!
  24. 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.
  25. Hi there, I am using ScrollTrigger a lot, its a fantastic addition! the only issue I've run into so far is cleaning up when using ScrollTrigger.matchMedia() when un-mounting in my React components. I've tried killing all ScrollTrigger instances, and killing timelines individually. simplified setup below: const buildTimeline = () => { // ... setup stuff ScrollTrigger.saveStyles([boxRef.current, mobileRef.current]); ScrollTrigger.matchMedia({ '(min-width: 720px)': () => { if (!boxRef.current) { console.log('boxRef does not exist'); } ScrollTrigger.create({ // config stuff animation: desktopTimeline.current .to( // animations ) }); }, '(max-width: 719px)': () => { if (!mobileRef.current) { console.log('mobileRef does not exist'); } ScrollTrigger.create({ // config stuff animation: mobileTimeline.current .to( // animations ) }); }, }); } useEffect(() => { if (!hasMounted.current) { hasMounted.current = true; buildTimeline(); } return () => { // kill all ScrollTrigger[s] ScrollTrigger.getAll().forEach(t => t.kill()); // try killing individual timelines also mobileTimeline.current.kill(); desktopTimeline.current.kill(); } }, []); This would normally work ok on ScrollTrigger instances generally - or at least it seems to! - but if I'm using matchMedia I'll still get media query change events firing where the component is unmounted (i.e. navigating to a different route). any idea what I'm missing here?
×