Problem with GSAP animation(?)
When i first time load the page on mobile, it does this weird page shifting (gsap animation). When you refresh the page, GSAP scrolltrigger animation is working just fine, but not when you first time open it....
https://batman4ever87.github.io/jt/
import "./song.scss";
import Player from "../../components/player/Player";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
gsap.registerPlugin(useGSAP);
const Song = () => {
useGSAP(() => {
gsap.to(".song", {scale: 0.7, filter: "blur(15px)", scrollTrigger: {
trigger: ".song",
scrub: 1,
pin: true,
start: "top 20%",
end: "bottom center",
}})
})
the code im using for the animation
https://batman4ever87.github.io/jt/
import "./song.scss";
import Player from "../../components/player/Player";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
gsap.registerPlugin(useGSAP);
const Song = () => {
useGSAP(() => {
gsap.to(".song", {scale: 0.7, filter: "blur(15px)", scrollTrigger: {
trigger: ".song",
scrub: 1,
pin: true,
start: "top 20%",
end: "bottom center",
}})
})
the code im using for the animation
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Recent Announcements
Similar Threads
Was this page helpful?
