Jump to content
Search Community

kresogalic

Premium

  • Posts

    15

  • Joined

  • Last visited

 Content Type 

Posts posted by kresogalic

    Create stacked cards with 100vh height

    in GSAP

    Posted

    I am using next.js, here is the video of demo https://streamable.com/aqxe3u where you can see the problems i am facing and here is my code implementation:

     

    'use client'
     
    import React, { useLayoutEffect, useRef } from 'react'
    import gsap from 'gsap'
    import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
    import { StickyHighlight } from './Highlight'
    import classes from './index.module.scss'
     
    if (typeof window !== 'undefined') {
    gsap.registerPlugin(ScrollTrigger)
    }
     
    export const StickyHighlights = ({ highlights }) => {
    const containerRef = useRef(null)
     
    useLayoutEffect(() => {
    let panels = gsap.utils.toArray('.card')
     
    panels.forEach((panel, i) => {
    ScrollTrigger.create({
    trigger: panel,
    start: () =>
    panel.offsetHeight < window.innerHeight ? 'top top' : 'bottom bottom', // if it's shorter than the viewport, we prefer to pin it at the top
    pin: true,
    pinSpacing: false,
    })
    })
    }, [])
     
    return (
    <div className={classes.stickyHighlights} ref={containerRef}>
    <div className={classes.stickyHighlightsInner}>
    {highlights?.map((highlight, i) => (
    <div className="card" key={i}>
    <StickyHighlight index={i + 1} {...highlight} />
    </div>
    ))}
    </div>
    </div>
    )
    }

    Vertical pin and change number

    in GSAP

    Posted

    Hello guys, i need help with the design i need to achieve. I have a vertical line, with 4 sections in this case, where i need to move number while scrolling on that vertical line and change the number when it hits the section dot.  If anyone can help with it, i would appreciate a lot.

     

    Screenshot 2022-03-25 at 13.03.02.png

    Angular mouse cursor follow ruins mouse enter and leave on host

    in GSAP

    Posted

    Hey guys, I am trying to do a mouse cursor follow and also i want to achieve mouse enter and leave on host element, and somehow it triggers too much on host because mousemove host listener is somehow triggering it. 

     

    This is a host listener on app.component.ts

     

    @HostListener('mousemove', ['$event'])
    mouseMove(e: MouseEvent) {
    this.gsapService.cursorMove(e, this.cursor.nativeElement);
    }

     

    This is a gsap service.

    import { Injectable } from '@angular/core';
    import { gsap } from 'gsap/all';
     
    @Injectable({
    providedIn: 'root',
    })
    export class GsapService {
    constructor() {}
     
    cursorMove(e, element) {
    const cursorPosition = {
    left: e.pageX,
    top: e.pageY,
    };
    gsap.to(element, {
    duration: 0.3,
    left: cursorPosition.left,
    top: cursorPosition.top,
    });
    }
    }

     

    And this is mouse enter and leave on the host

    @HostListener('mouseenter')
    onMouseEnter(e) {
    this.mouseEnter(e);
    }
     
    @HostListener('mouseleave')
    onMouseLeave(e) {
    this.mouseLeave(e);
    }
     
    constructor(private elRef: ElementRef) {}
     
    ngOnInit(): void {}
     
    mouseEnter(event) {
    console.log(this.elRef.nativeElement, 'mouse enter');
    const tl = new TimelineMax();
    tl.to(this.elRef.nativeElement, 0.1, { scale: 1.01 });
    tl.to('#circle-out', 0.3, { scale: 2 });
    }
     
    mouseLeave(event) {
    console.log(this.elRef.nativeElement, 'mouse leave');
    const tl = new TimelineMax();
    tl.to(this.elRef.nativeElement, 0.1, { scale: 1 });
    tl.to('#circle-out', 0.3, { scale: 1 });
    }

     

     

     

    ScrollToPlugin dont work on scroll

    in GSAP

    Posted

    I am trying to create slow smooth scroll on website in React and it doesn't work, this is what I tried so far.

     

    constructor(props) {
            super(props);
            this.state = {
                scrollTime: 0.5, // Speed
                scrollDistance: 100, // Scroll easing distance
                ticking: false,
            };
        }
     
    componentDidMount() {
            window.addEventListener('mousewheel', this.mousewheelHandler, false);
            window.addEventListener('DOMMouseScroll', this.mousewheelHandler, false);
     }
     
    mousewheelHandler = (event) => {
            event.preventDefault();
     
            let { scrollDistance, scrollTime, ticking } = this.state;
     
            // // SLOW SCROLL
            var slowScroll = () => {
                var delta = event.wheelDelta / 120 || -event.detail / 3;
     
                var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
                var finalScroll = scrollTop - parseInt(delta * scrollDistance);
     
                TweenLite.to(window, scrollTime, {
                    scrollTo: {
                        y: finalScroll,
                        autoKill: true
                    },
                    ease: Power1.easeOut,
                    autoKill: true,
                    overwrite: 5
                });
                ticking = false;
            };
     
            if (!ticking) {
                requestAnimationFrame(slowScroll);
                ticking = true;
            }
        };

    Trying to replicate menu link animation effect

    in GSAP

    Posted

    @Noturnoo thank you this works, but I am integrating this in React, and what happens if I have structure like this:

     

    <nav className="links">
         <NavLink exact to="/">Home</NavLink>
         <NavLink to="/services">Services</NavLink>
         <NavLink to="/work">Work</NavLink>
         <NavLink to="/blog">Blog</NavLink>
     </nav>
×
×
  • Create New...