Search the Community
Showing results for tags 'parallax'.
Found 62 results
-
I'm trying to improve my website SEO and one step is the LCP. No matter what I do I'm unable to make the LCP to become the logo. For some strange reason in desktop (bigger sizes) it works, but even that sometimes won't work because the LCP frequently changes (usually it is the id="cloudFixed1"). Nothing works: fetchpriority="low", fetchpriority="high", loading="lazy". I even tried to make the clouds load later (2frames) but it wouldn't work in mobile. Any suggestions would be welcome, thank you! https://codepen.io/Ramoses-Hofmeister-Ferreira/pen/azdqgpX
-
For some reason, my parallax scroll is getting a strange bug that will make all the scroll elements mess up (blank spaces, not finishing the animation, overlapping and so on) in 2 scenarios: - Changing the page size and not reloading the page; - Quickly scrolling (as far as I was able to investigate it will happen when the content is still loading, but I'm not completely sure about this information); The first scenario isn't a big deal (but if it isn't that hard I would like to fix it) since you don't expect the user to do it. Yet the second scenario is something I need to fix because it directly affects the user experience. Any idea about what is happening and the alternatives? https://codepen.io/Ramoses-Hofmeister-Ferreira/pen/azdqgpX
-
Hi, I am working on this idea of scrolling through sections with SVG's. Those SVG's have layers that I animate with ScrollTrigger. There are 3 sections 'Hero scene', 'City scene' and 'New section' (in the future there might be more sections). At the moment I am a bit stuck on how to continue, specifically how to transtition from the 'City scene' to the 'New section'. Preferably I have the City pinned/snapped so that those layers will go down where then the layers from the 'New section' will animate from underneath. Basically how the hero transitions into the city. Also I am not sure if this is the right way of doing this. It could be that I need to change the way I have setup those sections and that there is a better way and more scalable way when adding more sections that flow into one another. If there's someone who can help me get into the right direction it would be much appreciated! PS If needed, I can transfer my example codepen to stackblitz (https://stackblitz.com/@gsap-dev/collections). Because those SVG's are pretty large and I can imagine for readability it would be easier. Greetings, Mark For a better view I recommend viewing the 'Full Page View' as it is not optimized for smaller screen sizes ----
-
Sneaker Brand Timeline using ScrollTrigger and ScrollToPlugin from GSAP
leejaew posted a topic in GSAP
Just finished building an interactive sneaker timeline featuring sequential animations, parallax effects, and smooth scroll navigation! Here's how I implemented key GSAP features: ScrollTrigger for Timeline Progression ScrollTrigger.create({ trigger: '.timeline-container', start: "top center", end: "bottom bottom", onUpdate: (self) => { const progress = self.progress; timelineLine.style.height = `${progress * 100}%`; } }); Sequential Content Reveals gsap.to(shoeDate, { opacity: 1, y: 0, duration: 0.6, ease: "power2.out", onComplete: () => { // Chain next animation gsap.to(shoeName, { x: 0, opacity: 1, duration: 1, ease: "power2.out" }); } }); ScrollToPlugin Navigation document.addEventListener('keydown', (e) => { if (e.code === 'Space') { gsap.to(window, { duration: 1.2, scrollTo: { y: targetShoe, offsetY: 100 }, ease: "power2.inOut" }); } }); Smooth Parallax Effects gsap.to(".parallax-bg", { scrollTrigger: { scrub: true }, y: 100, scale: 1.1, ease: "none" }); Interactive Letter Animations letters.forEach((letter, index) => { tl.to(letter, { color: '#e10600', duration: 0.3, ease: "power2.inOut" }, index * 0.15); }); Other Features: Spacebar navigation between shoes SoundCloud audio integration Fully responsive design Dynamic image loading with loading state-
- 1
-
-
- scrolltrigger
- scrolltoplugin
- (and 6 more)
-
Hi, I am trying to achieve a 3D cube with a parallax layer on top the follows when the cube rotates, just like this example i have stumbled apon (https://ilovemobile.nexd.com/c/4ct5X7ospn/creative/m7CpkDDHVYsxSRX4), I see its made with canvas, but im not too familiar with that and have since tried to give it a go with GSAP, but cant seem to get it right... Anyone get any tips for me? I have tried to create a CodePen with my current code (note images are not that well represented here, but i tried the best i could with placeholders.)
-
Hi, Thanks for your support. I inspired with 'Cassie' Codepen example to create my parallax effect with scrollTrigger. You can view it in my codepen link pasted. The problem is that sometimes work and sometimes not work, I don't know what is the problem. Sometimes start working and if you change the size width of the browser , it stops working. Sometimes not works from the begining and start working when I refresh it. Always test it in private mode and inside scrollTrigger I have invalidateOnRefresh: true. I have another javascript instances like alpinejs, jquery,... I removed their, but it continuus working intermitendlly. In the codepen it seems that always work well, but in my project not and is not showing any error. Can you guide to me how to fix it ? PD: Sorry for my english Thanks a lot, Regards
-
scrolltrigger How could i create a more interesting zoom effect in GSAP?
MultiFlex posted a topic in GSAP
As you can see from my CodePen, my image zooms in when scrolling down and pins until its finished. My question is, how can i make the zoom more interesting to where the image is revealing more as it zooms in ? So it starts off small like it currently is and then instead of just zooming in, it maybe reveals more of the surrounding image as it zooms. Does that make sense? Would love to know if anyone has any ideas on this. -
I am struggling to get this effect to work. There is a hero image with parallax that is working. But the logo, which starts full size and fixed to the bottom of the hero container (with a slight overlap of about 75px at the bottom), needs to resize smaller to fit in the sticky header at the top. This should scrub with the scrollbar and be sticky at the top shortly before the hero is fully scrolled past. I've spent days trying to get this to work, and I can't find any examples anywhere that have helped me get to the bottom of the issue. Any help would be greatly appreciated!
-
Greetings everyone, I have recently started to work as a Shopify Developer and I have a task to tackle. The developer before me used ScrollTrigger to animate the Home page. It would display one div (slide) that would cover the full size, and when scrolling, the next div coming from the bottom would overlap the existing one, continuing the scroll this animation would repeat until there were no more slides left. Now the client requested that I have this same animation but in reverse, when scrolling, slides would appear from the top and overlap the existing one. Is this possible with this current JS code, or do I need to make this from scratch? I've managed to find a Post here that has CodePen that shows what is my current animation.
-
Section scrolling with parallax using ScrollTrigger is not working as expected.
Krishnakant posted a topic in GSAP
I am not able to get this simple thing working. Basically I want to have sections with parallax effect without leaving the space at the bottom of the page. I have the sections overlapped initially. But either they all move by equal amount or leave white-space in-between which is not desirable. Going forward I also want the Orange section to get pinned. Please guide me on how all of this can be implemented. -
Hi Everyone, I recently recieved a project for a tour and travels website. I was scrolling through many design and thought of creating a parallax website with 3D models, but I haven't created any up until now. So I needed some suggestions on how to start and where to get the resources. Also, will there be any performance issues when hosting the website. (Website is not Dynamic, More like a Gallery type for an agency). How do I optimize the performance of the website while building it? What thinks should I be aware of? Any suggestions will be helpful. Thank You.
-
Hello, I'm exploring the examples but I can't find what I'm looking for, and I want to see if it's possible to do it. I'm looking to have some cards move horizontally with a parallax effect when scrolling, but I want them to stay centered, and the next card should appear on top of the previous one. I don't want them to push each other like a slider. When reaching the last card, there should be 5 cards stacked on top of each other in the middle, and then the vertical scrolling of the site should continue to work. This website has it, but cards with vertical scroll https://quipo-app.com/
-
Hi, i'm trying to replicate this animation , but i don't really understand what's wrong with the animation. https://codepen.io/pixit_design/pen/ExKWVdq -> found on another topic. My structure is different. When i don't set horizontal: true, the image property change, but when i want to do it with horizontal trigger, the property doesn't change anymore. I'm sorry if this question has already been asked. i hope you will be able to help me
-
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 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!
-
Pinning sections with different html content within a large SVG with scrolltriger
samjm posted a topic in GSAP
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)
How to animate Parallax and Pinning at the same time using GSAP's ScrollTrigger
JAMIUL ISLAM posted a topic in GSAP
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. -
How to pin a div and move the image inside using ScrollTrigger
Daniel Drummond posted a topic in GSAP
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
