Search the Community
Showing results for tags 'next'.
Found 8 results
-
Hi community, need some help. I'm facing a problem in setting up a custom cursor for my page in Next.Js. My cursor should only work for certain blocks - it is not visible on all other blocks. I managed to make the cursor itself, but I ran into a problem. I have a problem with initializing the appearance of the cursor when scrolling the page. That is: when I see my cursor and start scrolling up, my custom cursor will be visible on other sections (where it shouldn't even be) until I stop scrolling and move the cursor. I want it to initialize in my block correctly Here is an example where I think this works well (work block): https://www.fhoke.com/ And here is my demo. Here on the first block there is no cursor, on all other blocks there is. You can catch my error this way, start scrolling down the page from the first block and the custom cursor will not be visible until you stop scrolling and move the mouse. It works the same way in reverse https://codesandbox.io/p/sandbox/custom-cursor-chthqm?file=%2Fsrc%2FApp.tsx%3A24%2C11
-
react GSAP Does not repeat animation when re-entering the page
Zhulinskiy Danil posted a topic in GSAP
The animation plays while I'm on the page for the first time, after I exit and come back - the animation stops playing I tried: timeline put in useRef gsap.context and subsequently revert Manually clear timeline using kill A simple example that also doesn’t work for me: Here is a link to a site where the text with the same problem is https://next-resume-hazel.vercel.app/ Wait for the full animation and intensity approximately, then go back by clicking on the RESUME title and the text will not animate again. (This post was completely translated using google translator, sorry if anything is not clear) import gsap from 'gsap' import { useEffect } from 'react' export function Component() { useEffect(() => { const obj = { n: 0 } // This will only work while I'm on the page for the first time // If I go to /about, or any other page, and go back, // code block below - will stop working and output the object to the console // Although if you look in _gsap the id of the animation is different from the previous one // Also, not only to but also from, timeline and other things stop working // with which you can smoothly change values gsap.to(obj, { n: 1000, duration: 1, onUpdate() { console.log(obj.n) // 0 - 1000 } }) }, []) return <></> } -
On clicking the link scrollTrigger in the below error demo and scrolling the section is not being pinned but on manually refreshing the page the it is getting pinned and works fine, on removing any transition animations the pin works as well still works. Here's a link to the same error that I replicated. https://stackblitz.com/edit/nextjs-rdx4ro?file=pages%2Fscroll.js P.S I am a gsap noob and im still learning -
Hello, I am unable to deploy my Nextjs app with Vercel. I keep getting the error that I attached in the email. I tried following the instructions provided by Greensock, but to no avail. Has anyone encountered this problem before? Thank you in advance.
-
Hello! I'm working with Next.js and have run into a logistical issue with Refs. https://codesandbox.io/s/nested-react-next-gsap-gvksxp ^^ In the sandbox I have my IndexPage mapping out a few items, problem being, almost half of the elements need animation, and this means doing const thing = useRef([]) thing.current = [] const addToRef = (el) => { if (el && !thing.current.includes(el)) { thing.current.push(el); } }; A bunch I have animated the text but targeting the rest of the stuff that needs tweens seems like a ton of work (unless I'm missing something) Is there a recommended approach for animating a bunch of children elements that are being mapped out? I'd love to use a ref on the container div and target down to any level with .children[i] or .querySelectorAll but this hasn't quiet panned out in my experiments. I appreciate the advice, please let me know if my demo needs adjusting or if I can clarify anything! Nye
-
Hi I have gone through a lot of posts and found that tweento(getlabelafter()) will take me to the next label. But the issue is that it doesn't allow me to skip any tween and jump to the next label. Can you please have a look at the codepen n suggest a way to skip a tween so i do not have to wait for the tween to be over before going on to the next label -
Hi, this is probably super obvious, but I was wondering how I might set up a next & previous button, so that when clicked, it would play a next or previous step in a timeline sequence? What I want to do is basically an animated slideshow/presentation. The first frame/scene (which has it's own timeline) would animate, and when it's over it would pause until someone clicks the "next" button. If the "previous" button is clicked, I'd like it to replay the previous scene. What I'm stuck on is getting the master timeline to pause between scenes, as well as getting it to replay just the previous scene (and not reverse the entire master timeline). It seems simple but I'm a little stuck. I put together a simple example on codepen to illustrate what I'm trying to do: http://codepen.io/ohem/pen/wWBoRg Any insight is much appreciated.
-
Hi, Let me congratulate GreenSock for the hard work and success. My question is, how to do next and previous in TimelineMax. ? I am able to play,pause,reverse and resume but how to go to the next/previous frame of the animation? any help will be highly appreciated.
