[Why gsap flip plugin work on codepen but not with nexjs project]

@Rodrigo that works now ! thank you so much grateful to you

[Why gsap flip plugin work on codepen but not with nexjs project]

@GSAP Helper Appreciate the time you put to help solving this
 

https://stackblitz.com/edit/react-batocr?file=src%2FApp.js

 

I want the image to scale as it was in the codepen demo,

once again thank you for your help

[Why gsap flip plugin work on codepen but not with nexjs project]

@GSAP Helper Thank you so much for your answer I appreciate that

I have followed the useGSAP hook tutorial and I think I have implemented it correctly

how ever Still with no luck getting the same result, when I scroll I can see that the text and the image move little it but the image does not scale at all

 

'use client'
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import { Flip } from "gsap/dist/Flip";
import { useRef } from "react";
import styles from "./page.module.css";

gsap.registerPlugin(useGSAP, ScrollTrigger, Flip);

export default function Home() {
  const container = useRef(null)
  
  useGSAP(() => {
    container.current.classList.add('type--open')
    const flipstate = Flip.getState(['.type__expand-img', '.anim'], {
      props: 'transform'
    })
    container.current.classList.remove('type--open')
    Flip.to(flipstate, {
      ease: 'sine.inOut',
      simple: true,
      scrollTrigger: {
        trigger: container.current,
        start: 'center bottom',
        end: 'center top',
        scrub: true,
      }
    })
  }, {scope: container})

  return (
    <main>
      <div className={styles.box}></div>
      <div className="content content--center">
        <h3 className="meta">Project 2</h3>
        <h2 className="type" ref={container}>
          Life's a wild journey;<br />
          embrace the<br />
          <span className="type__expand type__expand--reveal type__expand--center">
            <span className="aright">detours </span>
            <span className="type__expand-img">
              <span className="type__expand-img-inner" style={{backgroundImage: "url('/2.jpg')"}}></span>            </span>
            <span className="anim skewed">and dance</span>
          </span>
          <br />
          under the stars.
        </h2>
      </div>
    </main>
  );
}

 

[Why gsap flip plugin work on codepen but not with nexjs project]

Hello there I'm trying to use the Flip plugin to first add a class to an element and then  capture the state and then remove that class, my code with react in codepen works totally fine but when i add the same code wth my nextjs project it does not work

 

+ the styles are loading correctly and the image

 

'use client'
import gsap from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import { Flip } from "gsap/dist/Flip";
import { useRef, useEffect } from "react";
import styles from "./page.module.css";

gsap.registerPlugin(ScrollTrigger, Flip)

export default function Home() {
  const wrapElRef = useRef(null)
  const imgRef = useRef(null)
  const textRef = useRef(null)

  useEffect(() => {
    const wrapEl = wrapElRef.current
    const image = imgRef.current
    const text = textRef.current

    wrapEl.classList.add('type--open')
    const flipstate = Flip.getState([image, text], {
      props: 'transform'
    })
    wrapEl.classList.remove('type--open')
    Flip.to(flipstate, {
      ease: 'sine.inOut',
      simple: true,
      scrollTrigger: {
        trigger: wrapEl,
        start: 'center bottom',
			  end: 'center top',
        scrub: true,
      }
    })
  })

  return (
    <main className={styles.main}>
      <div className={styles.box}></div>
      <div className="content content--center">
        <h3 className="meta">Project 2</h3>
        <h2 className="type" data-expand-2 ref={wrapElRef}>
          Life's a wild journey;<br />
          embrace the<br />
          <span className="type__expand type__expand--reveal type__expand--center">
            <span className="aright">detours </span>
            <span className="type__expand-img" ref={imgRef}>
              <span className="type__expand-img-inner" style={{backgroundImage: "url('/2.jpg')"}}></span>            </span>
            <span className="anim skewed" ref={textRef}>and dance</span>
          </span>
          <br />
          under the stars.
        </h2>
      </div>
    </main>
  );
}

 

See the Pen ZENBRja by dovisally (@dovisally) on CodePen

[Organzing my gsap code]

Hello there,

i do apologize for such a basic simple question

i want to know how to organize my gsap code i have 1 example and i want to see how you guy organize that so i will follow the same approach with rest of my code, i do not have any issue with the code i just want to see how do you professionally organize it on for production

 

const tl = gsap.timeline({paused: true});
    tl.to('#overlay', {
    	opacity: 1
    })
    tl.to('#menu', {
    	x: 0,
    	y: 0,
    	z: 0,
    	ease: 'Expo.easeInOut',
    	delay: -1.2,
    	duration: 2
    })
   	tl.to('.menu__line', {
    	x: 0,
    	y: 0,
    	z: 0,
    	delay: -1,
    	duration: 1.5,
    	stagger: 0.1,
    })
    tl.to('.menu__item__content', {
    	x: 0,
    	y: 0,
    	z: 0,
    	stagger: 0.1,
    	delay: -1.5,
    })
    tl.to('.menu__footer__item', {
    	opacity: 1,
    	stagger: 0.1,
    	delay: -1
    })
    tl.reverse()
    document.querySelectorAll('.nav__burger').forEach(btn => {
	    btn.addEventListener('click', e => {
	        btn.classList.toggle('active');
	        tl.reversed(!tl.reversed())
	    });
	});

 

[Smooth Scrolling (Not Anchor-Jumping!)]

On 6/8/2020 at 11:51 PM, TrulyNewbie said:

Hi, I've applied this smooth scroll to my site, but it cuts the footer off. Why might this be?

 

Thank you

 

I have also noticed the same problem if content is long enough there is a cut at the end,

I've been trying to fix it for couple of hours but not enough experience would be nice if someone can help

 

See the Pen VwaeZvp by dovisally (@dovisally) on CodePen

[Lazy load images with multiple sources]

I tested on firefox, chrome, edge same thing for me, i'm only able to see the first image,

i noticed that when i resize the browser I'm able to see everything fine

[Lazy load images with multiple sources]

Yes on my browser (firefox) it does, i will clear my cache and history and try different browser and check again

[Animating same class on scroll with stagger]

Hello there,

 

i made a quick demo on code pen, what i want to do is i have blocks over almost the majority of the text on my website

these blocks has the same class so i want to animate this class on scroll with a stagger, stagger should work only for the visible elements

and so on.. i hope you get the idea is it possible ?

 

also i notice the animation is happening for all blocks not on scroll how to fix that ?

See the Pen RwrXLLr by dovisally (@dovisally) on CodePen

[Animating width]

Thank you so much Mikel ❤️

one more question if you don't mind, i can't get it to work with intersection observer

just wanted to know what i'm doing wrong ? i'm not getting any errors in the console so i assume it's not a typo
 

const targets = document.querySelectorAll('.block');
const blockReveal = target => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
            const block = entry.target;
            gsap.to(block, { scaleX: 0, ease: Power4.easeIn, stagger: 0.1,}, 0.1);
            observer.disconnect();
        }
    });
  });
  io.observe(target);
};
targets.forEach(blockReveal);

 

[Animating width]

Hello,

I have a block over a text and i want to reveal the text and make the width of the block zero

as far as i know it is bad for performance to animate width,

and since i'm gonna use this animation quite a lot i'm worried to animate width

 

so is there is any better solution for my little problem ?

also can i change the animation direction from right > left to left > right ?

See the Pen LYpmKJb by dovisally (@dovisally) on CodePen

[Smooth Page Scrolling]

Thank you so much for your answer, i think i will play with your code

if i can't achieve anything i might just disable js for mobile and change the css

[Smooth Page Scrolling]

Hello there,

almost 2 years now have not find an answer for this question

so frustrated already, i'm trying to achieve smooth page scrolling like this website for example

 

http://www.thibaudallie.com/

 

after a long search i found this 

but as far as i see that the author closed it and does not recommend to use it

my question is, it is any how reasonable and stable to use the code from the page above ?

since i don't really have any other options, i do not want to use a jQuery plugin

 

i'm tired of searching and not finding anything related to that scrolling smooth experience