blizve0

Hi this is good, exactly what i needed, delayedCall won't be needed as I'll implement in a useEffect hook

Got it by force using javascript, still hope to find a better and faster implementation

Hi, I'm Trying to Create Something Like this preview https://www.awwwards.com/inspiration/broadwick-live I have an array of words which i would like to show on screen using gsap setText or set innerHtml on the Screen. I want the loop to run infinitely and switch words every 0.2 Seconds. I cannot get it to work, can somebody help me with this ?

@Ehsan.svh Hi Thanks I tried to do that too but failed, check out the complete implementation of the cursor here and tell me if you're interested in packaging this to npm. https://haspr-agency-portfolio.vercel.app Just message me on frustasio@gmail.com or on gsap forum

Hi Im using GSAP Scrolltrigger in my Projects Setup I have 2 divs, one above and one below. I have applied pin animation in first div. I have applied basic GSAP Scrolltrigger animation to the below div. Hero is the relevant GSAP code for both Divs First DIV gsap.to(projectsSlideRef.current, { x: -(scrollWidth - window.innerWidth), ease: 'none', scrollTrigger: { trigger: '.projects-slide', scrub: true, start: 'top top', end: () => '+=' + scrollWidth, pin: '.projects-slide', pinType: 'transform', pinSpacing: true, }, }) Second DIV gsap.to(document.querySelectorAll(id), { startAt: { transformPerspective: 1000, transformOrigin: 'center', rotationX: -90, y: '200%', opacity: 0 }, scrollTrigger: { trigger: id, }, opacity: 1, y: '0%', }) Problem The Second DIV animation only works if first div is not present, if first div is present then scrollTrigger happens way before it should and till i scroll and reach the second div animation has been already occured. Help please its getting hard to create a codepen as the project is really big

Hi I was able to implement the second solution you mentioned, very grateful for that I just want one more help, maybe two ?, 1 : I want half Lines to Go Left and Half to Go Right, currently they are going right, I can't figure out how, 2 : Some Items are flashing when they are leaving the screen at the right side

HI Brother, I'm not familiar with any of those languages, if you could use another state managment system instead of useState to store all the animation data and just add gsap code to a function which works on some type of mount based functionality, or if you are having trouble, i found this package which allows for useState useEffect usage in Vue https://www.npmjs.com/package/vue-hooks I hope this solves your problem

SUMMARY Hi I want to create a marquee animation. I want half of these rows to move from left to right and other half from right to left in Criss-Cross Manner. I also want all rows sliding speeds to be little different. EXPECTED BEHAVIOUR Half Rows should move to right side , move out of the view to right side, then reappear again from left side in an endless Loop and vice versa for other half with different speeds. CURRENT BEHAVIOUR Half of them are not looping, and the ones which does are not in a proper manner as I want them. Can be seen in codepen Please Help me to correct my GSAP Animation, Any Help is Appreciated ?

Oh I Guess I need to Refresh on Page Switches for scrollTrigger animations to Re-initialize

Hi, I am using GSAP ScrollTrigger along with smooth-scrollbar library and this is the Plugin I'm using. ERROR - When I switch Pages usng React Router (Or Any Router) The Respective Page Content Either Dissappers or Freezes and All GSAP Animations Freezes This is The ScrollTrigger Plugin import Scrollbar from "smooth-scrollbar"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); class ScrollTriggerPlugin extends Scrollbar.ScrollbarPlugin { constructor(scrollbar, options) { super(scrollbar, options); this.setProxy(); } setProxy() { const scrollbar = this.scrollbar; ScrollTrigger.scrollerProxy(document.body, { scrollTop(value) { if (arguments.length) { scrollbar.scrollTop = value; // setter } return scrollbar.scrollTop; // getter }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, }; }, pinType: "transform", }); scrollbar.addListener(ScrollTrigger.update); } } ScrollTriggerPlugin.pluginName = "ScrollTrigger"; export default ScrollTriggerPlugin; This is How I Use It on All Pages as a Component import { useEffect } from 'react' import Scrollbar from 'smooth-scrollbar' import ScrollTriggerPlugin from '@/math/scrollTrigger' Scrollbar.use(ScrollTriggerPlugin) const SmoothScroll = () => { useEffect(() => { const view = document.getElementById('view-main') //` Declare View Reference const settings = { damping: 0.075, renderByPixels: false, delegateTo: document, } const smoothscroll = Scrollbar.init(view, settings) return () => { smoothscroll.destroy() } }, []) } Note: When i use the view document.body directly These Problems Don't Occur. I have already checked with the smooth-scrollbar developer and tested out that the ScrollTrigger Plugin is Causing this Trouble. I have tried re-initialization but id doesn't help

The effect was infact really easy to do, I just got the mouse Acceleration and Multiplied it by Circle Width (CircleWidth * MouseAcceleration) thus changing the width to Expanded when Moving Mouse, and the Rotation was achieved using Math.tan() Function to get Mouse Movemenet Direction. Feel free to Experiment with the Setting on this codepen to get desired results https://codepen.io/blitzve0/pen/vYJGPaa

Oh Ok Means I should set the co-ordinates directly to gsap without using states for exporting cursor data Sure I'll make the changes Thanks

Thankfully no errors for me today, I just wanted to know if their are some Performance Boost tips possible for this GSAP Cursor Position Setter Animation. If someone can let me know this is optimal enough or push me in some other direction if not.

For future visitors with same problem I found the solution https://github.com/idiotWu/react-smooth-scrollbar/issues/15#issuecomment-335047892 Just realised it's not laggy on Windows, but on my machine (Pop OS Linux) in development , there horizontal scroll is laggy as hell, maybe something to do with Linux. Anyways, Reducing Scroll Distance does seem to improve The Visual Smoothness, thanks. Update : Yup just testing again on Pop OS, its definitely 3x more laggy here, I guess issues with the OS and Graphics Drivers

Hi again, I am trying to implement Horizontal Scroll using GSAP Scroll Trigger Problem 1: The Scroll works fine while Vertically Scrolled but when I reach the Horizontal scroll section, suddenly the Scrolling becomes very Laggy. Problem 2 : If you press Right Arrow Key or swipe left on mobile You'll be able to overscroll to white empty region on normal divs, how to fix that. Quick UI Setup : <>... <div1 width 100vw height 100vh /> <div2 horizontalOne width 200vw (for horizontal scroll) height 100vh /> <div3 width 100vw height 100vh /> ...</> Sidenote : I'm using Smooth-Scrollbar as Scroller Update ** Confusion : The Lag is not that much in this codepen miniviewer i don't know why

Just Added Width Expansion to my codepen above, feel free to adjust the Easing and Duration to match your Needs (Tranform X Y -50% doesn't seem to be working in this miniviewer, open codepen in another tab for correct display) https://codepen.io/blitzve0/pen/vYJGPaa

Wow ? It's Like a Bullet Train Now. I'm in ? with the GSAP Community, I'm Getting Such Good Help for Free

*Update : Instead of Usng getElById, used React Refs and the QuickSetter Function is Amazing, The Performance Issue is Now Solved, Thank You Again* I'll try to Test the Mods you Suggested. I'm Using it on a Desktop intel i3-550 8gb Ram 4Gb Swap ,Nvidia GT710, Pop OS, Maybe this is working fine on Faster PCs

Hi , Finally I have Achieved my Desired Animartion but is Jittery Most of the Time. Any Help In Performance and Smoothness Please

Hi Anyone Reading This , Thanks in Advance. I Recently Started Learning React and Started off with Function Components and Am Unable to Convert This Code to Functional Component. Codepen Link is Above The Very First Class Component named Particles() which is a Class Component and I am Not Able to Convert it. Alos Link to CodeSandBox if you Prefer that https://codesandbox.io/s/aerosols-ir8lf On the Very top Level of the File Structure there is a File particle.js Anyones Help with React and GSAP Expertise is Appreciated. I Really Need it in Functional Component Only. Thank You

Love You Brother ??? I Never Thought I actually Would Find a Solution on the Forum ♥♥♥♥

Hello Everyone I Want a Jelly Blob which Follows the Mouse and Squuezes and Rotates To Match the Mouse Move Direction The Probelm is The When The Angle of Rotation Switches from 0 to 180 or -180 or from -180 to Positive, The Jelly Blob Changes Direction Suddenly Giving a Jittery And Bad Animation. You can test this out by just Following the Mouse in a Circular Motion, and The Jelly Blob will keep Switching Direction . If Anyone Can Fix This it Would be very Helpful Thanks In Advance.