Search the Community

Hi, community! I need your help with making this 3D carousel. It has multiple effects like, scroll effect, drag effect, hover effect. Is there any example which has all of these effects or could you kindly guide me? Thanks advance for your help! vlc_L4LvqzyFxC.mp4

Hello! I'm having issues with GSAP's scrambleText on hover. My expectation is that, on hover on all buttons: The text scrambles to its original text The size of the button doesn't change to accommodate the scramble (not as important to me right now, but thought I'd include this since I'm here) Right now, it's doing the text scrambling, but sometimes, on some buttons, it doesn't complete the full scramble, and I'm left with what looks like a typo in the button: My question is, how do I ensure that the animation is completed? or, how do I prevent this from happening? More context, this is on Webflow though I don't think this is too relevant. My code: document.querySelectorAll(".button").forEach((element) => { let animation; element.addEventListener("mouseenter", () => { animation = gsap.to(element, { duration: 0.3, scrambleText: { text: "{original}", chars: "lowerCase", speed: 0.2, }, }); }); }); I'm not sure what a minimal demo is, but let me know how I can get that for you if you need it. I have also attached a video. It does mess up when it's a quick mouseenter/-leave but I don't know how to articulate/troubleshoot this. Screen Recording 2024-11-04 at 9.58.45 AM.mov

As you can see in the attached screenshot, when we hover on the section the image animates, can we achieve this by GSAP. I am new to GSAP. please help me with the example if possible for you guys. Thanks in advance.

I've been struggling with this code all day. I've tried everything to get the hover effect to work correctly with a .reverse() but this was the closest I could get to it working correctly. Apparently, it works fine when hovering and unhovering the mouse, but if I repeat these actions, the animation freezes or does weird things. How can I fix this, or is there a better way to do this hover animation? I'd appreciate any help.

Hey people, Simply, I want to make this text transition, 20240711-0916-21.0398922.mp4 I tried to do it with Flip, but it probably doesn't support text, I tried Flip.fit and it didn't work as well(maybe don't know how to use it) So, is it doable.

Hi guys, i'm trying to achieve the feature of the slider that is in the prime video website. In a few words, the slides that are at the very right of the page, when they expand, they remain in the viewport and move the previous slide back. I don't know if i make it clear. Can you help me find a solution??. Thanks a lot

I'm facing a little bug in my code. I tried onHover code is working fine, on simple hover out also it works smoothly. But when I try to come out of the button and click on the body, the animation gets stuck and not clearing all the props. I have attached the video below and the codepen link for better understanding. Screen Recording 2024-05-04 at 6.02.58 PM.mov

Is it possible to manipulate opacity on both scroll Trigger and also on hover Pls help i am not able to find a solution , i also tried framer motion it also did not help , problem is either scrollTrigger based animation is working for opacity or the hover one and both dont work

Hello! ?? GSAP you are the best! I would be very grateful if you could help get this animation when hovering the cursor changes text and color as well as text as if inside a circle. I've been looking for a very long time for a solution but couldn't find one. Thank you very much in advance!

Hello ! I'm new here and I have a problem to start animation on hover. I try to make the same animation like this : https://custom-hover-animations.webflow.io/ (Character Tween V1) Can you help me ? pls This is my animation without the hover trigger : <script> gsap.registerPlugin(SplitText) var split = new SplitText("#title-b", {type: "chars"}); var splitb = new SplitText("#title-bb", {type: "chars"}); gsap.fromTo(split.chars, { y: 0, }, { duration: 1, y: -38, stagger: 0.05 } ); gsap.fromTo(splitb.chars, { y: 38, }, { duration: 1, y: -38, stagger: 0.05 } ); </script>

Hello I have a list of links and wanted to create a hover effect that animates all elements in some way (ie reduce opacity) but do something different on the hovered element (ie animate a contained span). I have created a pen with a React functional component that uses gsap. In essence I am doing the following: - Create 2 lists of elements (hovered element, non hovered elements) - Create 2 gsap timelines - Trigger those timelines on mouseover and on mouseleave. I have 1 problem and 1 question. Question: am I using best practices? I have wrapped the code inside a gsap context and I'm reverting the context when the component lifecycle ends. However I have 2 eventlisteners that I am not sure if thery are removed when lifecycle of component ends. Problem: animation only happens once for each element. How can i persist the timeline effects? Any help and suggestions would be greatly appreciated. Thank you

I'm trying to create something like if I hover on a particular section my cursor will change. I've linked my CodePen that I tried. In my case, when I'm hovering over the "show" section I'm getting the custom cursor. But when I'm moving the pointer to another section the custom cursor is not getting hidden. Also when I'm hovering over the "show" section the custom cursor is revealed from the top left corner of the page. But I need the cursor to sync with my mouse pointer. Like when I'm hovering over the section the custom cursor should reveal from the mouse location. And here is a short brief of what I've done on my code. I use "scale-0" to hide the custom cursor Initially. When I'm hovering over the "show" section I've changed the "scale" value to "1" to reveal the custom cursor. And "onMouseLeave" I've changed the scale value to "0" again to hide the custom cursor again. (Note: I'm not sure why the "Custom cursor" is not hidden initially on CodePen)

The direction of Marquee changes on hovering when scrolling upwards but it works fine when scrolling downwards. Somebody pls help me with this. ? CodePen File attached! HTML: <div class="marquee"> <div class="marquee-inner"> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> </div> </div> JS let currentScroll = 0; let isScrollingDown = true; const marquee = document.querySelector('.marquee'); const marq = document.querySelector('.marquee-part'); const mrq = document.querySelector('.marquee-inner'); const loop = horizontalLoop(mrq, { paused: false, repeat: -1, }); marquee.addEventListener("mouseenter", () => { gsap.to(loop, { timeScale: 3, ease: "power1.in" }); }); marquee.addEventListener("mouseleave", () => { gsap.to(loop, { timeScale: 1 }); }); window.addEventListener("scroll", function() { if(window.pageYOffset > currentScroll){ isScrollingDown = true; }else{ isScrollingDown = false; } gsap.to(loop, { timeScale: isScrollingDown ? 1 : -1, }).totalProgress(1); currentScroll = window.pageYOffset; }); /*---------------HORIZONTAL LOOP FN-------------------*/ function horizontalLoop(items, config) { items = gsap.utils.toArray(items); config = config || {}; let tl = gsap.timeline({repeat: config.repeat, paused: config.paused, defaults: {ease: "none"}, onReverseComplete: () => tl.totalTime(tl.rawTime() + tl.duration() * 100)}), length = items.length, startX = items[0].offsetLeft, times = [], widths = [], xPercents = [], curIndex = 0, pixelsPerSecond = (config.speed || 1) * 100, snap = config.snap === false ? v => v : gsap.utils.snap(config.snap || 1), // some browsers shift by a pixel to accommodate flex layouts, so for example if width is 20% the first element's width might be 242px, and the next 243px, alternating back and forth. So we snap to 5 percentage points to make things look more natural totalWidth, curX, distanceToStart, distanceToLoop, item, i; gsap.set(items, { // convert "x" to "xPercent" to make things responsive, and populate the widths/xPercents Arrays to make lookups faster. xPercent: (i, el) => { let w = widths[i] = parseFloat(gsap.getProperty(el, "width", "px")); xPercents[i] = snap(parseFloat(gsap.getProperty(el, "x", "px")) / w * 100 + gsap.getProperty(el, "xPercent")); return xPercents[i]; } }); gsap.set(items, {x: 0}); totalWidth = items[length-1].offsetLeft + xPercents[length-1] / 100 * widths[length-1] - startX + items[length-1].offsetWidth * gsap.getProperty(items[length-1], "scaleX") + (parseFloat(config.paddingRight) || 0); for (i = 0; i < length; i++) { item = items[i]; curX = xPercents[i] / 100 * widths[i]; distanceToStart = item.offsetLeft + curX - startX; distanceToLoop = distanceToStart + widths[i] * gsap.getProperty(item, "scaleX"); tl.to(item, {xPercent: snap((curX - distanceToLoop) / widths[i] * 100), duration: distanceToLoop / pixelsPerSecond}, 0) .fromTo(item, {xPercent: snap((curX - distanceToLoop + totalWidth) / widths[i] * 100)}, {xPercent: xPercents[i], duration: (curX - distanceToLoop + totalWidth - curX) / pixelsPerSecond, immediateRender: false}, distanceToLoop / pixelsPerSecond) .add("label" + i, distanceToStart / pixelsPerSecond); times[i] = distanceToStart / pixelsPerSecond; } function toIndex(index, vars) { vars = vars || {}; (Math.abs(index - curIndex) > length / 2) && (index += index > curIndex ? -length : length); // always go in the shortest direction let newIndex = gsap.utils.wrap(0, length, index), time = times[newIndex]; if (time > tl.time() !== index > curIndex) { // if we're wrapping the timeline's playhead, make the proper adjustments vars.modifiers = {time: gsap.utils.wrap(0, tl.duration())}; time += tl.duration() * (index > curIndex ? 1 : -1); } curIndex = newIndex; vars.overwrite = true; return tl.tweenTo(time, vars); } tl.next = vars => toIndex(curIndex+1, vars); tl.previous = vars => toIndex(curIndex-1, vars); tl.current = () => curIndex; tl.toIndex = (index, vars) => toIndex(index, vars); tl.times = times; tl.progress(1, true).progress(0, true); // pre-render for performance if (config.reversed) { tl.vars.onReverseComplete(); tl.reverse(); } return tl; }

I need the marquee to increase its speed from the position the mouse is hovered on it. But in my case, it starts from a different position when the mouse is hovered. Please Help! CODE HTML <div class="marquee"> <div class="marquee-inner"> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> </div> </div> JS let currentScroll = 0; let isScrollingDown = true; let marquee = document.querySelector('.marquee-inner'); let tween = gsap.to(".marquee-part", { xPercent: -100, repeat: -1, duration: 4, ease: "linear", }).totalProgress(.5); marquee.addEventListener("mouseenter", () => { tween.duration(2) }) marquee.addEventListener("mouseleave", () => { tween.duration(4) }) gsap.set(".marquee-inner", {xPercent: -10});

I get this Error Message when trying to stop the marquee on mouse hover! Pls Help!! Error: Invalid property pauseOnHover set to true Missing plugin? gsap.registerPlugin() Code: HTML: <div class="marquee"> <div class="marquee-inner"> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> </div> </div> CSS: gsap.registerPlugin(ScrollTrigger); let currentScroll = 0; let isScrollingDown = true; let shapes = document.querySelectorAll(".shape"); const links = document.querySelectorAll(".marquee-inner"); let marquee = document.querySelector('.marquee-inner'); let tween = gsap.to(".marquee-part", { xPercent: -100, repeat: -1, duration: 5, ease: "linear", pauseOnHover: true, }).totalProgress(0.5); let loop = gsap.to(links, { repeat: -1, speed: 1 + 0.5, draggable: true, reversed: false, paddingRight: parseFloat(gsap.getProperty(links[0], "marginRight", "px")) }); marquee.addEventListener("mouseenter", () => { loop.pause() }) marquee.addEventListener("mouseleave", () => { loop.play() }) gsap.set(".marquee-inner", {xPercent: -10}); window.addEventListener("scroll", function() { if(window.pageYOffset > currentScroll){ isScrollingDown = true; }else{ isScrollingDown = false; } gsap.to(tween, { timeScale: isScrollingDown ? 1 : -1, }).totalProgress(1); currentScroll = window.pageYOffset; });

Hello, I've seen this effect on few websites -> cursor has a transparent radius around itself, that when it hovers over a text, the part of text that is "inside" the radius loses it's fill color and only outline remains. I am a somewhat of a beginner, and I am very curious how this works because I'd love to implement it myself. If there is someone that could atleast point me in right direction, to help me figure this out I'd be very thankful. I've also found codepen that is kinda similiar but the principle is a bit different, to my understanding it can only be used on a flat color background, but on the websites that are linked below, this effect is used with picture/photos as background. Here are some websites that are utilizing this effect: https://maxilla.jp/ https://www.alexthery.com/

I've created a custom cursor whose X and Y gets updated on change of mouse. Using React and GSAP. The cursor also changes in size when it is hovered on a specific text. However, the hover state is not consistent and glitches at the time of using it. I'm sharing the codesandbox link where the same problem is replicated. Any and every help is appreciated, thank you. Codesandbox Link: Link

Hello, I have a question about how to replicate the hover effect in boxes like this site (https://www.vovi.studio/). My question is how to have the box background changed to black but in a smooth way like the example website and split the text. I managed to do something with the code below, but it wasn't as smooth as on the example site. // react box component import { useRef } from 'react'; import gsap from 'gsap'; import { ArrowCircleRight } from 'phosphor-react'; import { Flex, SplitElement } from '@/components'; import * as S from './styles'; import { DefaultTheme } from '@/styles'; interface IGridBoxProps { alignWrapper?: 'center' | 'flex-end'; justifyChildren?: 'center' | 'space-between'; } const GridBox = ({ alignWrapper = 'center', justifyChildren = 'space-between' }: IGridBoxProps) => { const splitElementRef = useRef<HTMLDivElement>(null); const gridBoxRef = useRef<HTMLDivElement>(null); const tl = gsap.timeline({ defaults: { duration: 0.2, ease: 'power1.inOut' } }); const onEnter = () => { if (splitElementRef.current && gridBoxRef.current) { const splitChildren = gsap.utils.toArray( splitElementRef.current.children ); tl.to(gridBoxRef.current, { background: DefaultTheme.colors.text.heading, duration: 0.3, stagger: -0.05 }); tl.to(splitChildren, { yPercent: -100, stagger: -0.05 }); } }; const onLeave = () => { if (splitElementRef.current && gridBoxRef.current) { const splitChildren = gsap.utils.toArray( splitElementRef.current.children ); tl.to(splitChildren, { yPercent: 0 }); tl.to(gridBoxRef.current, { background: DefaultTheme.colors.white, duration: 0.15 }); } }; return ( <S.GridBoxWrapper align={alignWrapper} ref={gridBoxRef} onMouseEnter={onEnter} onMouseLeave={onLeave} > <Flex align="flex-end" justify={justifyChildren} style={{ width: '100%' }} > <SplitElement firstChild="firstChild" lastChild="lastChild" ref={splitElementRef} /> <ArrowCircleRight size={20} weight="bold" /> </Flex> </S.GridBoxWrapper> ); }; export default GridBox; //styles box component import styled, { css } from 'styled-components'; import { Flex } from '..'; export const GridBoxWrapper = styled(Flex)` ${({ theme }) => css` width: 100%; height: 200px; border: 1px solid ${theme.colors.gray[50]}; padding: 3.2rem; svg { color: ${theme.colors.gray[200]}; } `} `; //react split component import { ForwardRefRenderFunction, HTMLAttributes, ReactNode, forwardRef } from 'react'; import * as S from './styles'; type SlitWrapperDivType = HTMLAttributes<HTMLDivElement>; interface ISplitElementProps extends SlitWrapperDivType { firstChild: ReactNode; lastChild: ReactNode; } const SplitElement: ForwardRefRenderFunction< HTMLDivElement, ISplitElementProps > = ({ firstChild, lastChild, ...props }, ref) => { return ( <S.SplitWrapper {...props} ref={ref}> <S.SplitChildren>{firstChild}</S.SplitChildren> <S.SplitChildren>{lastChild}</S.SplitChildren> </S.SplitWrapper> ); }; export default forwardRef(SplitElement); //styles split component import styled, { css } from 'styled-components'; export const SplitWrapper = styled.div` width: fit-content; height: 2em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; `; export const SplitChildren = styled.span` ${({ theme }) => css` color: ${theme.colors.gray[200]}; font-size: 2em; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; `} `; Can anyone help me improve this gsap code and make the animation as smooth as possible? Thank you all very much in advance. Gravação de Tela 2023-10-17 às 18.51.17.mov

Hi, I'm trying to make a magnetic hover composable in Vue3, GSAP and I wanted to replicate from this Link 2 Ways to Make a Magnetic Buttons using React, GSAP, Framer Motion (olivierlarose.com) . I'm needing help how to convert it with typscript too. Here is what I have so far : import { ref, watchEffect } from 'vue' import gsap from 'gsap' export function MagneticHover({ children:any }) { const magnetic = ref(null) watchEffect(() => { const xTo = gsap.quickTo(magnetic.value.current, 'x', { duration: 1, ease: 'elastic.out(1, 0.3)' }) const yTo = gsap.quickTo(magnetic.value.current, 'y', { duration: 1, ease: 'elastic.out(1, 0.3)' }) magnetic.value.current.addEventListener('mousemove', (e) => { const { clientX, clientY } = e const { height, width, left, top } = magnetic.value.current.getBoundingClientRect() const x = clientX - (left + width / 2) const y = clientY - (top + height / 2) xTo(x) yTo(y) }) magnetic.value.current.addEventListener('mouseleave', (e) => { xTo(0) yTo(0) }) }) return () => { return children({ ref: magnetic }) } }

As you can observe in the code pen link, both the instances get triggered on interacting with any one of them. What concept am I missing? I guess this is because both button instances share the same ref. I am unsure. What is the gsap way of doing this? I read gsap context, This gsap thread, and gsap with react basics But I am still confused.

Hello All, I need help on Gsap, if you see the link of codepen theres a hover on text, I want something like on this Site on the last section https://dimitriossykovaris.netlify.app/about Hover on the mail u will see the hover Thanks,

I have an Image reveal while hovering over a text, what I want is something like on this site https://dennissnellenberg.com/ on Recent work section

Hello everyone, is it possible to implement the filling of the button on hover, from the point where the cursor came from? Let's say if from bottom to top, then the animation will go from bottom to top of the button and so on. I would be glad if someone shows the implementation at least from two sides. Thank You!

Hello All, I am looking for the same text hover effect like below link. https://www.artistsweb.com/?fbclid=IwAR1ZFgHylvcRXuiqxcfiLOykfnX7VyQv4CssztG0TbkdW1RlxEWcZ1bMkXE Please help me out.

Hey! I would like the timeline to be completed before it fires again. Now when you hover really quickly it doesn't look good at all. I'm missing something in the structure that I struggle to find out. My first thought was to find the isActive() and then do some if statements. But isActive() is returning false all the time. - How can I finish the timeline before it fires again? - Do someone know why isActive() always returning false? This is probably a rookie mistake, and, this is my first post in a forum (ever!), so let me know if I could explain/structure my post better!