Search the Community
Showing results for 'Flip ScrollTrigger'.
-
I'm trying to animate the width of an element using ScrollTrigger and FLIP. It works fine except that on certain viewport widths it adds an unwanted Y translation on the element, usually something like translate3d(0px, -74.8404px, 0px);I first noticed this behaviour after opening up dev tools and refreshing the page (essentially resizing viewport). I also noticed that this might be related to the grid-template-columns of the the parent element which sets the target element to take up min-content. the translation isn't added when i use a fixed width but that causes the image to grow to fit a static layout instead of the layout changing as the image grows. I have attached a codepen link and screenshots of current behaviour and expected behaviour. Thanks and looking forward to a response from the good people of GSAP!! Note that this tends to happen after resizing the viewport and refreshing ( i am yet to make it responsive). it happens with viewports about 600 pixels wide so the bug might not show up in the codepen embed.
-
Hello there I'm trying to use the Flip plugin to first add a class to an element and then capture the state and then remove that class, my code with react in codepen works totally fine but when i add the same code wth my nextjs project it does not work + the styles are loading correctly and the image 'use client' import gsap from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import { Flip } from "gsap/dist/Flip"; import { useRef, useEffect } from "react"; import styles from "./page.module.css"; gsap.registerPlugin(ScrollTrigger, Flip) export default function Home() { const wrapElRef = useRef(null) const imgRef = useRef(null) const textRef = useRef(null) useEffect(() => { const wrapEl = wrapElRef.current const image = imgRef.current const text = textRef.current wrapEl.classList.add('type--open') const flipstate = Flip.getState([image, text], { props: 'transform' }) wrapEl.classList.remove('type--open') Flip.to(flipstate, { ease: 'sine.inOut', simple: true, scrollTrigger: { trigger: wrapEl, start: 'center bottom', end: 'center top', scrub: true, } }) }) return ( <main className={styles.main}> <div className={styles.box}></div> <div className="content content--center"> <h3 className="meta">Project 2</h3> <h2 className="type" data-expand-2 ref={wrapElRef}> Life's a wild journey;<br /> embrace the<br /> <span className="type__expand type__expand--reveal type__expand--center"> <span className="aright">detours </span> <span className="type__expand-img" ref={imgRef}> <span className="type__expand-img-inner" style={{backgroundImage: "url('/2.jpg')"}}></span> </span> <span className="anim skewed" ref={textRef}>and dance</span> </span> <br /> under the stars. </h2> </div> </main> ); }
-
@GSAP Helper Thank you so much for your answer I appreciate that I have followed the useGSAP hook tutorial and I think I have implemented it correctly how ever Still with no luck getting the same result, when I scroll I can see that the text and the image move little it but the image does not scale at all 'use client' import gsap from "gsap"; import { useGSAP } from "@gsap/react"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import { Flip } from "gsap/dist/Flip"; import { useRef } from "react"; import styles from "./page.module.css"; gsap.registerPlugin(useGSAP, ScrollTrigger, Flip); export default function Home() { const container = useRef(null) useGSAP(() => { container.current.classList.add('type--open') const flipstate = Flip.getState(['.type__expand-img', '.anim'], { props: 'transform' }) container.current.classList.remove('type--open') Flip.to(flipstate, { ease: 'sine.inOut', simple: true, scrollTrigger: { trigger: container.current, start: 'center bottom', end: 'center top', scrub: true, } }) }, {scope: container}) return ( <main> <div className={styles.box}></div> <div className="content content--center"> <h3 className="meta">Project 2</h3> <h2 className="type" ref={container}> Life's a wild journey;<br /> embrace the<br /> <span className="type__expand type__expand--reveal type__expand--center"> <span className="aright">detours </span> <span className="type__expand-img"> <span className="type__expand-img-inner" style={{backgroundImage: "url('/2.jpg')"}}></span> </span> <span className="anim skewed">and dance</span> </span> <br /> under the stars. </h2> </div> </main> ); }
-
Hi, Just add a return statement at the end of the useGSAP hook in order to clear the styles applied by Flip to the elements and it seems to work the way you intend: useGSAP( () => { container.current.classList.add('type--open'); const flipstate = Flip.getState(['.type__expand-img', '.anim'], { props: 'transform', }); container.current.classList.remove('type--open'); Flip.to(flipstate, { ease: 'sine.inOut', simple: true, scrollTrigger: { trigger: container.current, start: 'center bottom', end: 'center top', scrub: true, markers: true, }, }); // RETURN STATEMENT HERE! return () => gsap.set(['.type__expand-img', '.anim'], { clearProps: 'all' }); }, { scope: container } ); Here is a fork of your demo: https://stackblitz.com/edit/react-jdkto4?file=src%2FApp.js Hopefully this helps. Happy Tweening!
-
Hi @mr slowpoke welcome to the forum! I would use the Flip.fit() (https://gsap.com/docs/v3/Plugins/Flip/static.fit()/) function of the Flip plugin, to as the name implies fit the logo inside the other logo. Animating height is always something you want to avoid when animating, because it causes a browser repaint, which is really heavy on the browser a this will never come out right. I'm not complete sure what it is you want to happen, but what I've done is moved to timeline (timelines are the most powerful tool in GSAP) and add the Flip.fit() animation to that timeline, now now scroll that animation plays and the rest of the page scrolls like normal. Then as soon as the animations finishes the ScrollTrigger kills it self, it sets the pink section to a height of 0 and never played again. To me this seems the best way of handling this particular animation. Right now I've just place the .logo-text somewhere, but you can fully tweak this with CSS and then Flip.fit() will automagicly animate it to the logo up top. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/YzbqWQe?editors=0010
-
Yeah that jump seems a bit difficult to avoid IMHO. When you add/remove elements that affects a ScrollTrigger instance(s) and then refresh, ScrollTrigger will run the calculations and instances will update accordingly and then update the animations based on that. On top of this Flip does records the most common on the state: https://gsap.com/docs/v3/Plugins/Flip/static.getState()#configuration I'm pretty sure that there must be a way to solve this, but my first guess is that is not a simple endeavor, a bit beyond the help we can provide in these free forums. The main issue seems to be that when you filter the elements and the ScrollTrigger instances don't update completely when the DOM is updated, so the flip animations don't reflect that. The simplest way I can think to tackle this is probably the ugliest, less efficient and can't guarantee that it'll work. Create three sets of elements. One that is the visible one with all the images in it (by the way, why always with the angry dude in the pictures? can't it be a kitten or a puppy? 😆), a copy of the previous but with the images not rendered and a copy of the filtered list with the images not rendered, so you can flip the elements that will remain in the DOM after filtering to those that already have the scale value applied to them. Another option is to refresh ScrollTrigger before the Flip animation, there is still a jump, but is at the start of the animation: https://codepen.io/GreenSock/pen/OJYyMrj Happy Tweening!
-
Thanks @Rodrigo! I decided to reduce the scrub animations a bit and keep it simple so it looks nice and smooth + flip gives me that nice animation I want for filtering My only issue is the jump - it's all perfect when you're at the top of the page, but when you scroll down to the bottom part, or close to the bottom and then click the button, the scroll jumps to top. Is there a way to tell Flip to animate the height of the container/body the same way it does with elements inside? I tried to add the container div to the state so flip can register it, but the scroll will still jump to top + cards get some kind of scaleY animation to them. I know it's probably bit beyond the help you can give, but I'm not expecting a complete solution, just some suggestion or ideas to try. So far I've tried: 1) ScrollTrigger refresh() in onUpdate ❌ 2) Adding overflow hidden + 100% height on container/body while the animation is running ❌ 3) Adding the container to Flip's state ❌ I was also thinking: On my local build I am currently smoothly scrolling to the top of the page first. What if I somehow postpone the "shrinking" of the container/body, only after the scrollToTop animation is finished? Thanks for all the help so far guys.
-
Hi @Yiddy welcome to the forum! I'm not sure what your onUpdate code is doing, to me it also seems really wasteful to do new calculation on each tick. The onLeave and onLeaveBack seems perfect and it already changes its width on reparenting, so why add more complexity? If you want more to happen Flip just returns a tween, so you can add that to a timeline if you want with tl.add(myFlipAnimation) and do more on that timeline. Also normally people add an animation to a ScrollTrigger and then ScrollTrigger plays or reverses the animation. Your setup works, but in theory it is creating a new animation each time you scroll up and down. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dyEXVqo?editors=1000
-
Hello I have a bento style gallery and on scroll the rows and columns of the gallery are changing size so the middle element is zoomed in and take full screen size. In the code pen provided you will see that everything works ok until you resize the window. I found out that if the scale option is set to true then the grid and images adapt to the new window size but images are distorted as the parent element is now scaled with a transform and I cannot have that. Is there any way of reseting Flip and ScrollTrigger to calculate everything from scratch but for the new window size? Or any other solution i'm missing at the moment? Thank you very much for your help!
-
Hi, @mvaneijgenand @Rodrigo ,sorry for the late reply. Thanks for both of your reply and advice. I still pretty new to gsap so bascially been only using scrollTrigger currently. Flip looks like a very fun, so I will pick up flip as my next learning path. Just for my interest, which are the other commonly used gsap tool being used, so that i can plan my next learning path after finish learning flip
-
Instead of just moving the element some amount, I think It will be much easier (and responsive) to use the Flip plugin https://gsap.com/docs/v3/Plugins/Flip/ to jump to designated points (see example below). https://codepen.io/GreenSock/pen/bGxOjeP For the height of the element. It is highly recommended to enable markers so that you can visually see what ScrollTrigger is doing. Right now you're using the image as the trigger, but you want to line up things, so it is much easier to use the things you want to line up as the triggers. Instead of pin: true you can feed pin an element. And you can also define an endTrigger in ScrollTrigger, so below I've defined an element called #start and an element called #end which your ScrollTrigger uses for its call curations. You can define shorthands in the ScrollTrigger start and end properties, but when starting out I highly recommend naming all the values, so you have 100% control over what it is doing. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dyEPgwj
-
Hi, I would like to replicate an effect where there is an initial circle in the center of the screen and when the user scrolls down the circle should come down to the bottom right. I am unable to properly get this effect, I would appreciate some help over this, Thanks. I've linked a codepen demo for the effect that I was able to come up with. But is not even close to what I wanted to achieve.
-
Hi, You should try using Flip Fit for this: https://gsap.com/docs/v3/Plugins/Flip/static.fit() Here is a demo using ScrollTrigger and scrub: https://codepen.io/GreenSock/pen/JjVPyxd Hopefully this helps. Happy Tweening!
-
I don't know a quick fix for that in your current setup. My first instinct is to check out the Flip plugin (see my previous comment) . Also right now you have a tween plus ScrollTrigger for each image I would wonder what it would do if you have just one tween with one ScrollTrigger, because right now when you hide the elements the third element needs to update, but then also the 5th needs to wait for the third to fully animate before it can update and because they all depend on each other I don't see the need for them to all have their on animation + ScrollTrigger.
-
Hello, I have already created the animation with your help (without flip plugin) Now I want to use the flip plugin because i've never used it before and wanted to know how easy it is to rewrite it.... but ehm yeah, I don't get it HAHA That's how far I've come... I'm still struggling with how to apply the flip animation to my existing timeline with a scrollTrigger.... I've tried creating a separate scrollTrigger onStart, but to no success... if anyone can give me a tip on how to recreate this with the flip plugin, I'd be very grateful https://codepen.io/destroy90210/pen/ExJjyvg?editors=1011
-
Hi all! I wanted to make a book flip animation that flips like a book and zooms towards the book content. I used a template based off Jhey's flipbook animation https://codepen.io/jh3y/pen/VweZryJ where it use scrollTrigger to control the flipping and zoom animation. I managed to do some tweaking but im stuck where one the first page i want to make it that it will zoom further towards page content due to not able to pause the flip animation and do the zoom in and out animation (of the page content) without make it buggy. I'm guessing the page is declared dynamically and has conflicts with other animation. I'm fairly new to the GSAP works and was wondering how to pause the flip animation and do another animation. Thank you and have a great day!
-
I want to create something like the thing in the video where the image is moving between sections. I have given it a try using Flip and ScrollTrigger but I run into some issues where the image just bugs out and get vanished from the screen. I am sorry I can not provide a codepen, it would be really appreciated if someone could help me out. Here is the code: const [activePlace, setActivePlace] = useState(0); useGSAP( () => { new ScrollTrigger({ trigger: "#section-1", end: "bottom bottom", markers: true, onEnter: () => { setActivePlace(1); }, onEnterBack: () => { setActivePlace(1); }, }); new ScrollTrigger({ trigger: "#section-2", end: "bottom bottom", onEnter: () => { setActivePlace(2); }, }); }, { dependencies: [], revertOnUpdate: true } ); useGSAP( () => { if (activePlace === 1) { const prevImg = document.querySelector(".obj"); const state = Flip.getState(prevImg); document.querySelector(".obj-wrapper-1").appendChild(prevImg); Flip.from(state, { scrollTrigger: { trigger: "#section-1", end: "bottom bottom", scrub: true, }, }); } else if (activePlace === 2) { const prevImg = document.querySelector(".obj"); const state = Flip.getState(prevImg); document.querySelector(".obj-wrapper-2").appendChild(prevImg); Flip.from(state, { scrollTrigger: { trigger: "#section-2", end: "bottom bottom", scrub: true, }, }); } }, { dependencies: [activePlace], revertOnUpdate: true } ); vid.mp4 -
I hope you are doing well! I'm new with GSAP and I'm having a lot of problems with a complex animation. I tried to create a codepen as simple as possible so you can see what's going on, sorry if it's not very simple. Basically, I'm trying to make an animation like the one used in https://www.revolut.com/ but I can't get it to work, I think I improved the logic of the approach but there is something that keeps making it jump when adding or removing classes. If you need more context or whatever let me know. Thank you very much for your time.
-
Hi, Is better in this cases to just clear the inline styles before creating the Flip animation and store everything in a GSAP Context instance in order to easily revert everything: https://gsap.com/docs/v3/GSAP/gsap.context() Here is a fork of your demo that actually uses Flip.from() instead of to(), also is a good idea to not add ScrollTrigger configuration to a Flip instance but rather to store the Flip animation in a constant and then use that in a ScrollTrigger config, because of the way Flip instances work internally: https://codepen.io/GreenSock/pen/vYMzKZx Hopefully this helps. Happy Tweening!
-
Hi Awesome, GSAP community! I'm trying to achieve scrubbing using GSAP Flip animation. I'm facing an issue while scrubbing back to the top. Any idea why it's happening? Here is the codepen URL: https://codepen.io/azizqamar7/pen/XWGozxM When the end of the element crosses the center of the screen, while scrubbing back GSAP FLIP doesn't work properly, am I doing something wrong? -
Hi there! This is very layout-y so it's exactly the sort of challenge I'd use FLIP for. https://gsap.com/docs/v3/Plugins/Flip/ However it's made a little more complex by the fact that you're controlling it with a scrubbed scrolltrigger as scrub relies on precalculated values and flip is more dynamic, so you'll need to update those values when the screen resizes. https://codepen.io/GreenSock/pen/WNWKPZO?editors=0110
- 1 reply
-
- 1
-
-
- scrolltrigger
- gsap
- (and 1 more)
-
Flip and ScrollTrigger scrub is "jumping" when going backwards
Giacomo Franco posted a topic in GSAP
Hi! how is it going? Context Recently I've been working on a proyect on which I have to implement FLIP, Timeline and ScrollTrigger... Basically the animation goes this way, a little bit of context: At first I have a laptop SVG covering the entire screen, when the user scrolls, the SVG goes from the full screen to a child container on it, while the user is scrolling the animation is running ( for this I'm using the scrub property in ScrollTrigger), when the SVG is positioned where it has to be at the end, a SVG phone appears and goes next to the laptop. (In the Codepen that i've just created doesn't appear the phone, it isn't important at the moment) What's happening? I have 2 problems; When the page loads for the first time the laptop is positioned where it has to be covering the full screen, the first problem occurs when I scroll just after the end of the scroll, the SVG "Jumps" and when I scroll back the SVG is not positioned to the top of the page as it was before (please open the codepen in fullscreen so you can see the bug better). The other problem is that I can't make it responsive, when I set the parent to flex-wrap: wrap-reverse; it breaks and the laptop doesn't fit in the container and overflows the viewport -
Hi, @mvaneijgen is right, is better to just focus on getting the Flip animation happening first and then add ScrollTrigger to the mix. Adding ScrollTrigger to this is the simple part of the whole process. Also as Mitchel mentions when animating using Flip's from() method you need to get the state of the element, change the element in some way (reparent, change styles, etc.) and then animate from the initial state. In this case you can also take a look at Flip fit() as well: https://gsap.com/docs/v3/Plugins/Flip/static.fit() Here are a few demos using ScrollTrigger and Flip: https://codepen.io/GreenSock/pen/ZEmQBQg https://codepen.io/GreenSock/pen/RwqJBEa https://codepen.io/GreenSock/pen/JjVPyxd This is just a Flip demo that shows reparenting a group of elements using Flip fit(): https://codepen.io/GreenSock/pen/JjVPyxd Hopefully this helps. Happy Tweening!
-
Hi, I don't have time to update your demo now, but you should look into the Flip Plugin: https://gsap.com/docs/v3/Plugins/Flip/ This demo uses Flip and ScrollTrigger scrub and is fully responsive, it should provide a solid starting point: https://codepen.io/GreenSock/pen/bGxOjeP Hopefully this helps. Happy Tweening!
-
flip GSAP Flip with ScrollTrigger is jumping when active and inactive.
mvaneijgen replied to Rondi's topic in GSAP
Hi @Rondi welcome to the forum! Without looking at your code it sounds like you're trying to tackle the scrolling part first instead of focusing on the animation part. This is a classic mistake people make when working with ScrollTrigger. All ScrollTrigger is doing is animating your animation on scroll, so before you add ScrollTrigger you first have to make an animation! Check out the video below I would remove all ScrollTrigger code from your setup and just first focus on the animation. Get what you want to happen on page load. And when you got that happening it will be trivial to hook it to ScrollTrigger. I'm no flip expert, but I don't think it magically changes all elements. Flip always needs 3 steps. Get the state, change the state, animate the state. I only ever used it to tween one element and I think that is also how it works. If you need more elements to change you need to create a Flip state for each element. Below a fork of your pen where I crate a flip state for '.hero_bg-white' which changes shape via a class and then add a random other tween to the timeline to rotate it. I've enabled GSDevTools to it will be easier to debug the animation. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/PogqoGa?editors=0010
