Search the Community
Showing results for tags 'scrolling'.
-
Hey, I'm new to GSAP and need some guidance. I want to stop the viewport from scrolling until a video section appears in view. Once the video is fully visible, scrolling should resume. Essentially, I’m aiming to create a fixed element that only allows further scrolling once the video section is completely displayed. Also it should be stacked like an example i shared. Thank you.
-
Hi, I'm following the Get started and video tutorial but can't seem to get it to work as expected. I would like to pin elements in the left column to the top and bottom of the viewport, while having the elements in the right column scroll with pinning at the same time? Can You point me with what I am doing wrong? Thank You for Your wonderful library btw. It adds a lot of fun element to the content. index.html
-
Hello, I will be much appreciate if someone can help me with this! Since I am not a programmer I have used some help and basic knowledge to achieve the following scrolling effect. https://codepen.io/M-Milde-the-scripter/pen/pomNZeV Basically it start with a image sequence animation, followed by second animation presenting a text with half opacity words, which becomes visible while the user scroll down, and once all the words becomes visible the entire text continue to scroll to reveal the next content. As you can see I am adding some classes on the html element while the user scroll down: - on the header I add .header-active and on the body I add .bg-1 when the first animation ends - and again on the body I add .bg-2 when the second animation ends What I want to achieve is simply to remove those classes in the same order, once the user start to scroll up: - remove the class .bg-2 from the body once the second animation reveals from the t and start to play backwards - remove the class .header-active from the header and .bg-1 from the body, once the firs animation is showing from the top and star to go backwards while the user scrolling up. So the final effect will be when the user scroll back to top the background is again white and the navigation is not visible. on the top example I try with "onReverseComplete", but no success Thank you in advance!
-
Many years ago, I created a website where each 'page' was on a virtual grid of viewports e.g. ************************************************** * home page * contactus * about * ***************************************************** * section1.p1 * section1.p2 * section1.p3 * *********************************************************************** * section2.p1 * section2.p2 * section2.p3 * sectopn2.p4 * *********************************************************************** * section3.p1 * section3.p2 * ****************************************************** * section4.p1 * section4.p2 * section4.p3 * ****************************************************** Imagine the sections above are viewports and there are anchors connecting them, so an anchor in section1.p1 might link to section3.p2 and an ancor in section4.p2 might link to section2.p4 Using Mootools, the FX.Scroll function would take the x and y coordinates and when clicking the link would smoothly scroll to and from the different anchor points, sometimes diagonally or horizontally/vertically depending on the target location. Is there any way in GSAP to achieve this? Another solution that would meet my needs would be a vertical the horizontal scroll in one move if diagonal scrolling cannot be achieved. I'm quite new to GSAP, but understand JavaScript and jQuery. Many thanks Pete
-
Hi, i have made some animation with gsap, i used gsap.from for made the animation, but when i refresh with (CTRL+R) for F5 the animation on my bottom page don't play... i upload video for you can see what i talk .. my code : https://codepen.io/arkunis/pen/zYXKKLx video for you can see Thx for your help !
-
Hi, and Thanks in Advance; I need to create two sections. The parent div will be pinned, and you can scroll a Lottie animation on the left and text on the right together and snap the Lottie animation to specific keyframes. For example, I have a Lottie animation where it shows a bulb, then transforms into a notebook and then into a tablet. Simultaneously, on the right side section, I have a div with text in it. so when the animation is at bulb I want to show text bulb {initaily},then I scroll and if the animation is at the notebook I want to show notebook in the div text area. And if the animation is in between, snap to the nearest keyframe of a bulb or notebook and so on. and when the Lottie animation ends then unpin parent section. You can see the example if the website: https://www.brandnewschool.com/ if you scroll down. I am really stuck here.
- 10 replies
-
- scrolltrigger
- reactjs
-
(and 2 more)
Tagged with:
-
Hi, I would like to transform my first SVG to second SVG while scroll or On-load. The problem is, my svg doesn't contain the path directly and it has some shadow effect too. I tried to follow the official video instruction and it doesn't seems to work. Is there any way to achieve this with morphSVG or I need another plugin? I'm a beginner here so, any help would be much appropriated. Many Thanks Sajidul
-
Sorry for not providing any code pen. I'm new to GSAP. I'm trying to do an animation like this website with yellow element scaling. But I don't know how to implement it. I've checked the documentation but the ScrollingTrigger property in not for free usage. SO how to achieve this animation otherwise. Any help on this would be appreciated.
-
I am looking to develop a layout on GSAP in which I require horizontal scroll for few sections. I have attached layout structure diagram.
- 7 replies
-
- scrolling
- smoothscroll
- (and 6 more)
-
Hi devs, I'm trying to achive this animation using GSAP: As you can see the text is already present but the animation take place with opacity while scrolling. Thanks all!
-
I am trying to use the scrollTrigger plugin while implementing the fix for the safari scroll issue you flag in this article here. When I apply the CSS from this it breaks the pages native scroll and therefore the scrolltrigger doesn't fire. What can I do to resolve this In the section: Stop iOS Safari from resizing the window on scroll body, html { height: 100vh; width: 100vw; overscroll-behavior: none; overflow: hidden !important; } #viewport { position: fixed; overflow-x: hidden; overflow-y: scroll; height: 100vh; width: 100vw; -webkit-overscroll-behavior: none; overscroll-behavior: none; -webkit-overflow-scrolling: touch; } https://greensock.com/docs/v3/HelperFunctions#scrollResize My simple scrollTrigger on the element is just this but it breaks cause the above CSS ScrollTrigger.create({ trigger: '#test', start: 'top top', // endTrigger: '#otherID', end: 'bottom 50%+=100px', onToggle: (self) => console.log('toggled, isActive:', self.isActive), onUpdate: (self) => { console.log( 'progress:', self.progress.toFixed(3), 'direction:', self.direction, 'velocity', self.getVelocity() ); } });
- 2 replies
-
- scrolltrigger
- safari
- (and 5 more)
-
const assetLoader = new GLTFLoader(); var mixer; var model; assetLoader.load("https://cdn.glitch.global/5213cd0b-d594-4b34-9064-2f1f38b42c78/cube33.glb?v=1665271977633", function(gltf) { gltf.scene.traverse(function (node) { if (node instanceof THREE.Mesh) { object.frustumCulled = false; node.castShadow = true; node.material.side = THREE.DoubleSide; } }); model = gltf.scene; model.scale.set(1,1,1) model.position.setY(-1); model.position.setX(2); model.position.setZ(-2); model.rotation.x = Math.PI / 2; model.rotation.y = Math.PI / 2; model.rotation.z = Math.PI / -2; scene.add(model); camera.position.z = 4; /// MIXER&ACTION CONFIG/// mixer = new THREE.AnimationMixer(model); var action = mixer.clipAction(gltf.animations[1]); action.play(); var actiona = mixer.clipAction(gltf.animations[1]); action.play(); createAnimation(mixer, action, gltf.animations[1]); } ); var clock = new THREE.Clock(); function render() { requestAnimationFrame(render); var delta = clock.getDelta(); if (mixer != null) mixer.update(delta); renderer.render(scene, camera); } render(); function createAnimation(mixer, action, clip) { let proxy = { get time() { return mixer.time; }, set time(value) { action.paused = false; mixer.setTime(value); action.paused = true; } }; /// GSAP CONFIG/// function GSAP(){ gsap.registerPlugin(ScrollTrigger) ScrollTrigger.defaults({ scrub: 3, }) gsap.set(model.position, {x:-0.70,y:-1.80 ,},) gsap.to(model.position, { scrollTrigger: { trigger: ".section-four", start: "top top", toggleActions: "restart play none reset", //onLeave: myLeaveFunc, //onLeaveBack: myLeaveFunc end: '+=2000px', }, x:-1, y:-3 , }); let scrollingTL = gsap.timeline({ scrollTrigger: { trigger: ".section-four", ease: "Power4", end: '+=5000px', pin: true, scrub: 2, onUpdate: function () { camera.updateProjectionMatrix(); } } }); scrollingTL.to(proxy, { time: clip.duration, repeat: 0, }) /// I NEED TO RUN ANIMATION [1] HERE /// let scrollingTL1 = gsap.timeline({ scrollTrigger: { trigger: ".section-five", ease: "Power4", end: '+=5000px', pin: true, scrub: 2, onUpdate: function () { camera.updateProjectionMatrix(); } } }); scrollingTL1.to(proxy, { time: clip.duration, repeat: 0, }) } GSAP() }
- 1 reply
-
- scrolltrigger
- scrolling
-
(and 1 more)
Tagged with:
-
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
-
Hi, it's me again, I've achieved what I wanted both on desktop and mobile but on the latter I have this new problem of the addresbar messing things up. Let me explain, on mobile I have positioned this "isthmo" logo right above the bottom of the page, if I swipe up it goes on top, if I swipe down it goes back to the starting point. The address bar keeps getting in the way, I don't think u can see the problem on the codepen due to its structure so I'll attach some screenshots from the real website. I tried: ScrollTrigger.normalizeScroll(true); but it wasn't working well, plus disabled the page refreshing swiping down Should I try: ScrollTrigger.config({ ignoreMobileResize: true}) Thanks for your patience
-
I'm creating a background effect from blur to clear when scrolling. starts with filter: blur(30px) when image enter viewport. and then more clear with filter: blur(0) after top of image reach top viewport using gsap fromTo and add utils for css filter. but i have no idea for now. can help please?
-
Requirement We are looking for a front-end developer with knowledge on animations (GSAP, three, locomotive, etc.) together with good references and high proficiency on performance. Translating pixel perfect prototypes into high quality code Visual and engineering mindset Great attention about details on design Project Responsive one page website The page has five main sections that are intro, about, works, clients, contact with some transitions between these sections. Scroll trigger functions Thanks for your time, send me a DM with some interesting and visually complex samples that you have done.
-
I have a scrub animation, navigated by a Tags (scroll down arrow). When I navigate with the scroll down arrow, the scrolling switches to the rubber band scrolling. This weirdly only happens on mobile safari and isn’t reproducible on codepen… Here’s a link to the page: Sample Page Thank you for any hints or comments! IMG_1229.MOV
- 4 replies
-
- rubber-band
- scrolling
-
(and 1 more)
Tagged with:
-
Hey I have created a small example of what I wanna do. As you can see in my codepan video items are popping in correctly but after all three videos popped in I want to animate them on a path so it look like they are scrolling endlessly and I want to make it repeating. Please help me I'm new to gsap.
- 11 replies
-
Hi, I've been playing about with this codepen pen example I'm trying to make a continuous loop animation with vertical scrolling rather than horizontal however i'm running into a few issues. The list doesn't seem to start at the first index and when i scroll it's not going in sequential order but it's just jumping about (i.e i want 1 > 2 > 3 but it's doing 1 < 12 > 2 < 13 > 3) Any ideas? Is it because the content is dynamic and the plugin has issues recalculating? I'm using: GSAP v3.6.0 Angular 11 Demo: https://stackblitz.com/edit/gsap-continuous-scroll
-
Hello, I'm new to GSAP platform and I need to create simple scrolling animation for some bullet list. Here is an example on this page. https://www.marqeta.com/ It is build on custom javascript in this website but i want to make it on GSAP if possible kindly guide me. Kindly look at this section I want to achieve the same right side text scrolling animation kindly help me out in this. Thanks.
-
Hi! I've come across this especially unique combination of effects, and have been left in both awe and pain trying to figure out how to replicate such a complex stringes of elements. I've already done some research to figure out the basics of its mechanics, but as someone new to coding, my understanding is limited still. The site and effects in question are: Home Page - https://panamaera.fr/ 404 Page - https://panamaera.fr/404 About Page - https://panamaera.fr/about There seem to be two effects at play. A Canvas over images/videos, that generates a smokey distortion effect, rendering the smoke depending on what visual is underneath the canvas. The Canvas remains active between pages, registering a page change just like a visual change in a video, creating the fading smoke distortion transition between pages and their visual material. A mouse hover effect with smoke & distortion. The smoke is moving in synch with the Canvas' smoke, while the pointer clears the Canvas from over the image and lightens it a bit. On here https://www.awwwards.com/sites/panamaera, the site is tagged as having WebGL, GSAP Animation, ReactJS, GLSL used on it, however I'm not looking to learn everything about these tools, only whats specifically needed to recreate these effects. As I am looking to learn to recreate this effect, my questions are: What coding methods and techniques are they based on (within the world of the above mentioned tools)? What are the exact & relevant coding topics I should look for education on? How would you go about recreating these effects?
-
Hello everyone! I've been racking my brain trying to think of The Right Way™ to do this. In the codepen demo I've been working on, I've worked out how to have an inital timeline, which then moves to the main timeline. The total duration of the timeline is linked to the total pageHeight, and progress is tied to the scroll event. The main timeline currently repeats infinitely as this needs to continue to animate for an unspecificed amount of time (This could vary depending on the page's total scrollHeight). Ideally I would like to have another timeline play at the very end of the duration which resets the 'FOUNDER' text back to the initially displayed state just before the end of the total duration, but I'm pretty stumped on how I should approach this with GSAP given I don't have a fixed distance to scroll. Does anyone have any ideas or methods? Is there a better method I should be using rather than repeat -1 in this instance? Thank you for any help or suggestions in the right direction! Andrew
-
Hi GSAPers, I have an interesting challenge. I would like to scroll a div using GSAP. I want to scroll the div vertically using a tween that I can control using the position on an audio track head. I thought I could use the ScrollTo plugin, but I can't seem to understand see how to do it since both the time and the y position are fixed before the plugin initiates. Is it possible to change the div scroll position with ScrollTo interactively?