Search the Community
Showing results for tags 'parallax'.
-
Hi GSAP Community, i have a horizontal parallax ScrollTrigger and every slide or panel within the ScrollTrigger is 1/2 viewport width (CSS => 50vw) . Each panel is clickable and the click toggles the panel between 50vw and 100vw and pushes the other panels aside. Everything is working well but i want in addition, to center or pin the expanded panel to the viewport and disable the scroll. After the next toggle, the panel shrinks to 50vw and the scroll behaves like before. Is it possible to mix it with ScrollToPlugin? If so, can someone give me a hint or a starting point? Or is it doable with just ScrollTrigger? Thanks in advance
-
Hello, I want the footer part to come from the bottom like a parallax. I did it partially, but there is a space at the bottom. Can you help with this?
-
Hello, I made a copy for the gsap animation in the sample codepen link. But it doesn't work like the effect example, it takes the styles but there seems to be a shifting problem. Can you help me? Example; https://codepen.io/GreenSock/pen/JjYPgdp My Pen;
-
Hello, I want to make a stream like on this site. I partially succeeded, but I can't control the parallax. The parallax in the blue background that comes after CHAPTER 01 comes into play long ago and the right part looks bad. Actually, I have to give a container a 100% width and the main container a 300% width right now, I couldn't get it to get the width automatically. Can you help me? My sample site https://transmissions.cristobalbalenciagamuseoa.com/2019-21/moe-matsuoka.html
-
Hello, I actually want to stop the scroll and parallax effects that are not normal effects on mobile devices. I used a code for this, but smoothscroll still works. can you help me? You can view the project here, thank you very much. http://clients.super-agency.com/test/dy/ I'm using the code below, it turns off the parallax, but the smooth scroll effect still works. I want browser default scrolll on mobile devices. console.clear(); gsap.registerPlugin(ScrollTrigger, ScrollSmoother, SplitText); let smoother = ScrollSmoother.create({ wrapper: "#smoother-wrapper", content: "#smoother-content", smooth: 1, smoothTouch: 0.1, normalizeScroll: true, ignoreMobileResize: true, effects: ScrollTrigger.isTouch === 1 ? false : true, });
-
Hi, I want to do something similar to history. There will be years and articles and photographs of that year. And I want to make them parallax when scrolling horizontally. I created a demo codepen. I thought I did that because each panel class needs to have auto-width in itself, but everything overlaps. I am sharing a site as an example. https://transmissions.cristobalbalenciagamuseoa.com/2019-21/moe-matsuoka.html Thank you so much...
-
Hi there, I'm trying to do the same animation as this website: https://www.jomor.design/ in the work section half window scroll I'm having trouble getting it. I couldn't figure out how he did it. I kinda mimicked it using position sticky but I had to remove overflow-x: hidden from html & body, and it made huge horizontal scroll since i had many section overflowing. I tried to do it with gsap but the best I can manage is what you can see on codepen. I'm running out of ideas to try, and I'd love some tips please Thanks in advance
-
Hello, first of all, the problem is; I am making a project with gsap. I want parallax to work on desktop version and I have succeeded. When the menu opens, I wanted to pause the body scroll, which works successfully. But there was a problem. I can't pause sroll in mobile version because the project is not loaded in GSAP (768px) resolution. I want to pause body scroll in both mobile and desktop versions. I am sharing the code and codepen link with you. Can you help me? console.clear(); gsap.registerPlugin(ScrollTrigger, ScrollSmoother); let smoother; const mm = gsap.matchMedia(); mm.add("(min-width: 768px)", () => { smoother = ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#smooth-content", smooth: 1, normalizeScroll: true, ignoreMobileResize: true, effects: true, }); return () => smoother.kill(); });
-
Hello, in the example i shared in codepen, I only want to disable the parallax effect on the mobile device, can you help with this?
-
Hi community, once again I wanted to use your universal and broad wisdom. I have multiple sections following each other with different heights and each of them can have a background image. This implemented as a direct child, is positioned absolute, has the size of the section and, of course, has a background-image set. This image's position can vary, depending on what the user selected in the backend. What is now relatively tricky for me is to use each section as the actual container where the bg image parallaxes in. So not the whole window but only the current section's height should be used. I found this demo this demo to start off with: https://codepen.io/GreenSock/pen/QWjjYEw and I adjusted it to the version you see now at the end of the post. My questions now are: 1. How can this work with multiple sections as the reference container? 2. How can this work with different bg positions? 3. Why do I need the ratio calc in there' Wouldn't the acutal height of the section suffice? Hope it's clear what my problem is and looking forward to your ideas! Have a nice one!
-
Hello everyone, I'm trying to make a timeline here, but I don't know how to use the horizontal scrolltrigger. I also want the images to parallax horizontally, and I want them to go left and right as the scroll moves. Finally, I want to give the opacity active value of 1 for the circles with low opacity in each pass. Thank you very much Example; https://transmissions.cristobalbalenciagamuseoa.com/2019-21/maissane-zinai.html
-
Hi all! I'm wondering if you can show me a clue on how to perform the next operation I haven't been able to do. I have a mega svg on which I want to scroll down and show elements of the svg along with other html elements by pinning multiple sections of the large svg. At certain position I want to display an image in background while the svg elements appear in front while scrolling, let's say that the svg will be divided in four sections that will show a few animations using the ScrollTrigger. After some adjustments I've made to the css properties of the svg I've managed to approach a little to what I need but I'm still not sure if I'm going in a correct direction. What I want to achieve is to display text (video, or any other html element) in front and an image in background while scrolling through the large svg by pinnning a section of the svg to display the content, then scroll and pin again to the next section and so on. In my test, basically I have merged an image parallax with an svg pinning animation. Is there any suggestion or better approach you could advise me to do this. Thanks a lot in advance for your appreciated help! -
(1).thumb.png.a1b7993dc8325922340f4e1caed26a22.png)
I tried to pin the current page (div1) and when the next page(div2) will slide up, the current page (div1) will keep going 30 percent to the top, creating a parallax effect. But the problem is, when The 2nd page(div2) pins and 3rd page(div3) slides up, the 2nd(div2) page's parallax effect breaks the whole design. I need help. -
I have an image that is the background in a div, I want to have a parallax effect when the scroll is activated. I'm already managing to do the effect, but it's influencing the div I use as a "mask" of the image. I have this logic: As you can see , the div with the section-parallax class is smaller when I move the scroll and I want only the image to move.. I want to fix the div I use as a mask to a size, just move the image inside it. I'm new to GSAP and have been doing a lot of research to create the effects I need and to learn more, sorry if it's a silly question. Thanks -
Hope you have had a great weekend guys I´ve already done some coding on codepen > using the amazing scroll trigger but I need help to finalize the code and make the scroll trigger & parallax nice and smooth if possible. Kind regards from Denmark. Question > is it possible for gsap to bend / warp the images as you scroll like on this awesome website? > https://kacper.ch/ Inspirational codepen > https://codepen.io/GreenSock/pen/wvMeNee
-
Dear GreenSock community! I am currently working on a project with a horizontal parallax. Each "scene" needs to be in full width and height of the viewpoint with a static background and up to 3 "objects" within this "scene" that just slightly move horizontal with different speed on scrolling, so that it creates kind of a depth effect. I already built this by using rellax library and it worked pretty well, at least while using a modern mouse (Magic Mouse etc) without a physical wheel. My client is using a mouse with a wheel and this is causing the scrolling to be very faltering. I tried to combine my first attempt with several scroll smoothing libraries, nothing worked. So now I completely rebuilt this by using GSAP and ScrollTrigger. In general, the scroll smoothing works now with all kinds of mouses, which is great! BUT: I can only get the objects in the very first scene to move. In all other scenes, the objects do not move. I spent hours on this but can't get it run properly. I really hope to get some feedback on this issue from the community. Thank you in advance!
-
Hey guys, I have an issue an I'm looking for help. I have a page that has a parallax effect in all of the sections of a page whenever the user scrolls. So there are this black text blocks that are separated but whenever you scroll one of the blocks moves up to be next to the one on top, the issue is that this is causing a blank space between sections of the page. I want to know if there is a way, whenever the black text block moves up, to make the sections below move up as well, basically follow that text block whenever it goes up. I try this by just using a yPercent on the sections below, but is is just causing a blank space to be left on the bottom of the page Here is a link of how the animation should work https://drive.google.com/file/d/1EsKinyuID5buWKhQllRhE1Bmc6el5GTX/view and I left a codepen with the basic markup of my current pate. Any help would be appreciated.
-
Hello, Thought I would post on here in case anyone has any good references on how I could recreate something similar to the section starting with 'Real Estate' on this example website: https://videinfra.com/ I am planning to use ScrollTrigger and pinning the overall section. Then translating the images and text based on different triggers. Just need some examples of how to translate the images in a similar way. If someone has a sample Codepen or other reference they could share I would really appreciate it.
-
Hello, Here are some requirements for the page I need to build: - Must scroll horizontally, so using mouse wheel and arrows would scroll the page horizontally. - Content sections would have different widths based on the content in each section (so not 100vw as I have seen from the ScrollTrigger examples, also have noticed that the width of the container is set to the total width of the content sections. So 6 sections would equate to 600% width set via the css). - Each section will have different parallax/animations upon entering the viewport. - There will be a navigation with scroll to anchor links. - This will be desktop only use case, so I do not have to consider mobile views. I have looked into ScrollTrigger and ScrollMagic and as noted above have seen that the widths of the content are 100vw. So is there a way to have differing content widths if I go this route? I also came across this repo: https://github.com/oberonamsterdam/horizontal So with this background being defined, my question to anyone with any experience building a page/site with horizontal scroll is what method has worked well for you? I am planning on using Gatsby.js and gsap regardless but am more so asking if ScrollTrigger horizontal is viable solution or is there something else better to us for this part? Thank you in advance for your feedback, Frank.
-
As you can see in my codepen code there is a image and I want to fixed its position center in the section. When scrolling down it will follow the scroll. When the following section comes up there will be a parallax effect. That means image will stick at the bottom of that section and following sections going up over the image. Here is a simple example. Like the form on that website, I want my image but in the center of viewport. If you don't understand please let me know. -
Hi everyone, I would like to achieve the following image parallax effect (vertical translation) with Scrolltrigger and without Smooth Scroll. https://tympanus.net/Tutorials/SmoothScrollAnimations/ I tried the parallax demos in the docs, but they work differently then this example. Which way is the best to get this effect? Thanks Martin
- 12 replies
-
- 1
-
-
- parallax
- translation
- (and 2 more)
-
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.
-
Hi, I would like to get Locomotive Scroll to work with some parallax code and ScrollTrigger. I am using the demos Parallax scene on scroll - ScrollTrigger Locomotive Scroll with ScrollTrigger scrubbing and pinning but when I add the Locomotive Scroll, it breaks the parallax code. How do I get the parallax code to work with the Locomotive Scroll? Thanks
-
Hello! I am new to GSAP and React and I am struggling to find out how to use Scroll Trigger in GSAP v.3.3.4 in my react components. I have tried to do this in react hooks and with Class components but it does not work and spits out an warning saying TypeError: Window.getComputedStyle: Argument 1 is not an object.. I have attached the hook code and also the error that it results in . Apologies I do not have a codepen for my codes. I would appreciate any advices/help! Thank you!! My Hooks Code is: import React, { useRef, useEffect} from 'react'; import Layout from '../components/Layout' import {gsap} from "gsap"; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import '../assets/styles/pages.scss'; gsap.registerPlugin(ScrollTrigger); const Gallery = () => { const purpleRef = useRef([]); const pRef = useRef([]); useEffect(() =>{ var tl = gsap.timeline({ scrollTrigger: { trigger: purpleRef, scrub: true, pin: true, start: "top top", end: "+=100%" } }); tl.from(pRef.current, {scale: 0.3, rotation:45, autoAlpha: 0, ease: "power2"}) .to(purpleRef.current, {backgroundColor: "#28a92b"}, 0); }) return ( <> <Layout> <section class="purple" ref={purpleRef}> <p ref={purpleRef} >This panel gets pinned in a similar way, and has a more involved animation that's wrapped in a timeline, fading the background color and animating the transforms of the paragraph in addition to the line, all synced with the scroll position perfectly.</p> </section> </Layout> </> ); }; export default Gallery; I used ScrollTrigger Scrub Animation demo (The purple panel) as an inspiration which I found on this code pen: https://codepen.io/GreenSock/pen/WNvVOWw
.thumb.png.c7702a8f9dc1b828e00c4343b23958c1.png)
.thumb.png.783c40726af164f89cbf78481bba4a1e.png)
.thumb.png.1d3c2119751212857c55ea09bea2a434.png)
-
Hello everyone I need a simple solution. This is my website http://araf.dynamicflowdev.com. I want to the parallax run with the sidebar scroller. Now what's happening now: When I scroll down full section goes up. But I don't want this. What I want: I want when user scroll, every section will go up as scroll. Not the full section. I don't want to scroll full section. I want something like this site https://nagama.digital/ On that website, scrolling is too smooth and works perfect. I want something like that. I want the smooth scroll. Here is my js code: gsap.to(".custom_panel:not(:last-child)", { backgroundPosition: `20% ${+innerWidth / 60}px`, yPercent: -100, ease: "slow", stagger: .5, scrollTrigger: { // markers: true, trigger: "#content", start: "top top", end: "+=300%", scrub: 8, pin: true } }); gsap.set(".custom_panel", {zIndex: (i, target, targets) => targets.length - i}); Here is my css code: #content { width: 100vw; height: 100vh; position: relative; top: 0; left: 0; overflow: hidden; } .custom_panel { position: absolute !important; will-change: transform; min-height: 100vh; } Here is my view: http://araf.dynamicflowdev.com
.png.50fa5c8e23994007e259914057efb2f1.png)
.png.08bf395f95ccd0773466a214742f6588.png)
.png.36bfa32521a49fb9303aca2cf369bdee.png)