Jump to content
Search Community

blizve0

Members

  • Posts

    22

  • Joined

  • Last visited

 Content Type 

Posts posted by blizve0

    Scrolltrigger Miscalculates Triggers

    in GSAP

    Posted

    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

     

    Looping Text Marquee Animation

    in GSAP

    Posted

    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

    Pls Pls Pls Help Me With This Jelly Blob

    in GSAP

    Posted

    On 1/31/2022 at 7:47 PM, PhilippeUn said:

    Hello all! Is there a ready to use solution for vue/nuxt? Would love to use the JellyBlob in my projects, but I'm struggling with 'useEffect' and 'useState' which comes from react.

    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

    • Like 1

    Looping Text Marquee Animation

    in GSAP

    Posted

    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 😁 

    See the Pen ZEamPKm by blitzve0 (@blitzve0) on CodePen

    Content Dissappears After Pages Change from Router

    in GSAP

    Posted

    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

     

    Circle animation that follows cursor mouse move event

    in GSAP

    Posted

    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

    See the Pen vYJGPaa by blitzve0 (@blitzve0) on CodePen

    • Like 7

    Lag when Horizontal Scroll with GSAP Scroll-Trigger

    in GSAP

    Posted

    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

    Lag when Horizontal Scroll with GSAP Scroll-Trigger

    in GSAP

    Posted

    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
     

    See the Pen oNeBRQJ by blitzve0 (@blitzve0) on CodePen

    Follow Mouse

    in GSAP

    Posted

    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)

    See the Pen vYJGPaa by blitzve0 (@blitzve0) on CodePen

    • Like 7

    Animation is Jittery

    in GSAP

    Posted

    *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

     

    Convert React Class to Function Component 😢😢😢

    in GSAP

    Posted

    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

    Quote

    particle.js

     

    Anyones Help with React and GSAP Expertise is Appreciated.

    I Really Need it in Functional Component Only.

    Thank You

    See the Pen jOweJxv by blitzve0 (@blitzve0) on CodePen

    Pls Pls Pls Help Me With This Jelly Blob

    in GSAP

    Posted

    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.

    See the Pen bGRvvOe by blitzve0 (@blitzve0) on CodePen

×
×
  • Create New...