Sulochan

A comment. in ref7 trigger, there's a typo of ref2 which has been taken care of but still , futile.

I am just trying to implement things out but not getting animations as expected. Any help will be appreciated. There is an animation which will have a component which will scale from large to 1 , therefore used .from and then it will translate to left and be out of viewPort, thus using .to . Now as soon as this completes, I want to fire another animation of exactly similar nature but the only change is the contents inside the component. Therefore I added them in the same timeline. But now only .from animation is fired for every component and .to doesn't (at least it is not visible). I want to fire the animation of another component just after finishing the .to animation. Attaching the code if it is helpful. const t1 = gsap.timeline({ scrollTrigger: scrollTriggerOptions, }); //for o t1.from(ref1.current, { scale: 17, opacity: 0, }) .to(ref1.current, { translateX: '-100%', // opacity: 0, scrollTrigger: { trigger: ref1.current, // pin: ref1.current, start: '58% 50%', end: '60% 50%', scrub: true, markers: true, }, }) .to(refo.current, { opacity: 1, width: '15.4%', }); //for f t1.from(ref2.current, { scale: 17, opacity: 0, }) .to(ref2.current, { translateX: '-100%', // opacity: 0, scrollTrigger: { trigger: ref2.current, // pin: ref1.current, start: '58% 50%', end: '60% 50%', scrub: true, markers: true, }, }) .to(reff.current, { opacity: 1, width: '10.7%', }); //for e t1.from(ref3.current, { scale: 17, opacity: 0, }) .to(ref3.current, { translateX: '-100%', // opacity: 0, scrollTrigger: { trigger: ref3.current, // pin: ref1.current, start: '58% 50%', end: '60% 50%', scrub: true, markers: true, }, }) .to(refe.current, { opacity: 1, width: '10.7%', }); //for r t1.from(ref4.current, { scale: 17, opacity: 0, }) .to(ref4.current, { translateX: '-100%', // opacity: 0, scrollTrigger: { trigger: ref4.current, // pin: ref1.current, start: '58% 50%', end: '60% 50%', scrub: true, markers: true, }, }) .to(refr.current, { opacity: 1, width: '12.7%', }); //for t t1.from(ref5.current, { scale: 17, opacity: 0, }) .to(ref5.current, { translateX: '-100%', // opacity: 0, scrollTrigger: { trigger: ref2.current, // pin: ref1.current, start: '58% 50%', end: '60% 50%', scrub: true, markers: true, }, }) .to(reft.current, { opacity: 1, width: '11.6%', }); //for a t1.from(ref6.current, { scale: 17, opacity: 0, }) .to(ref6.current, { translateX: '-100%', // opacity: 0, scrollTrigger: { trigger: ref6.current, // pin: ref1.current, start: '58% 50%', end: '60% 50%', scrub: true, markers: true, }, }) .to(refa.current, { opacity: 1, width: '14.4%', }); //for 2 t1.from(ref7.current, { scale: 17, opacity: 0, }) .to(ref7.current, { translateX: '-100%', // opacity: 0, scrollTrigger: { trigger: ref7.current, // pin: ref1.current, start: '58% 50%', end: '60% 50%', scrub: true, markers: true, }, }) .to(refl2.current, { opacity: 1, width: '11.3%', }); //for 4 t1.from(ref8.current, { scale: 17, opacity: 0, }) .to(ref8.current, { translateX: '-100%', // opacity: 0, scrollTrigger: { trigger: ref8.current, // pin: ref1.current, start: '58% 50%', end: '60% 50%', scrub: true, markers: true, }, }) .to(refl4.current, { opacity: 1, width: '12.4%', }); Attaching the video preview . Since I have coded in react, I find it difficult to display in codepen.io .(In case anyone is able to help me with this as well ) WhatsApp Video 2024-02-22 at 18.39.10-2.mp4

Was working with svg and GSAP and to get elastic effect, was using GSAP.to but the motive isnt achieved. Let me know where i am going wrong. import { useEffect, useRef, useState } from 'react'; import './showHow.css'; import { motion } from 'framer-motion'; import logo from '../assets/oferta blue.png'; import Oferta from './Oferta'; import Reach from './Reach'; import gsap from 'gsap'; import { useGSAP } from '@gsap/react'; const ShowHow = () => { const path = useRef(null); const svg = useRef(null); const [mousePos, setMousePos] = useState({ x: 0, y: 0, }); useEffect(() => { // @ts-expect-error Image width and height may not exist const mouseMove = (e) => { setMousePos({ x: e.clientX, y: e.clientY, }); const posx = e.clientX / window.innerWidth; const posy = e.clientY / window.innerHeight; // @ts-expect-error Image width and height may not exist path.current.setAttribute( 'd', `M0,50 Q${posx * 600},${posy * 100} 500,50` ); }; window.addEventListener('mousemove', mouseMove); return () => { window.removeEventListener('mousemove', mouseMove); }; }, []); useGSAP(() => { const outMouse = () => { gsap.to(path, { ease: Elastic.easeOut.config(1, 0.3), attr: { d: 'M0,50 Q300,25 600,50', }, }); }; // @ts-expect-error Image width and height may not exist svg.current.addEventListener('mouseleave', outMouse); }); const variants = { default: { x: mousePos.x - 8, y: mousePos.y - 8, }, }; return ( <div> <motion.div className='cursor' variants={variants} animate='default' /> <div className='logo'> <img src={logo} alt='logo' /> </div> <div className='black-container'> <div className='blue-text py-8'>Let us show you how</div> <div className='roboto text-7xl text-white font-light' style={{ lineHeight: '1.2', marginRight: '240px' }} > At Oferta24, we believe no business is the same; each with unique challenges, objectives and market conditions. That is why we have created a marketing platform that provide flexible, customizable and measureable marketing strategies to compliment the unique needs of any business…including yours. </div> <div className='button'>Get your FREE Campaign</div> <div> <svg ref={svg} viewBox='0 0 600 200' preserveAspectRatio='xMinyMid meet' > <path d='M0,50 Q300,25 600,50' ref={path} /> </svg> </div> <div style={{ height: '100vh' }}></div> <div style={{ color: 'white' }}>now services section</div> <Oferta /> <Reach /> </div> </div> ); }; export default ShowHow;

import React, { useEffect, useRef } from 'react'; import './services.css'; import { gsap } from 'gsap/all'; import { ScrollTrigger } from 'gsap/all'; gsap.registerPlugin(ScrollTrigger); const Services2 = () => { const staticRef = useRef(null); const scrollRef = useRef(null); const componentRef = useRef(null); let componentHeight; useEffect(() => { // Access the height of the component using ref componentHeight = componentRef.current.clientHeight; console.log('Component Height:', componentHeight); // You can perform further actions with the height, such as updating state or triggering animations }, []); useEffect(() => { const staticPart = staticRef.current; const scrollPart = scrollRef.current; gsap.timeline({ scrollTrigger: { trigger: scrollPart, start: 'top 75px', end: `bottom ${componentHeight}`, pin: staticPart, scrub: true, onEnter: () => console.log('Pin starts'), onLeave: () => console.log('Pin ends'), }, }); }, []); return ( <div> <div style={{ display: 'flex', justifyContent: 'space-evenly', margin: '10px', }} > <div ref={componentRef} style={{ width: '40%' }}> <div style={{ width: '100%', height: '400px' }} ref={staticRef}> hi, my name is yosh </div> </div> <div style={{ width: '40%' }} ref={scrollRef}> <div style={{ height: '400px' }}>yes</div> <div style={{ height: '400px' }}>yes</div> <div style={{ height: '400px' }}>yes</div> <div style={{ height: '400px' }}>yes</div> </div> </div> </div> ); }; export default Services2;