raana

hi All I did was add the following two lines of code and I got this error. import {gsap} from "gsap/dist/gsap"; import { Draggable } from "gsap/dist/Draggable"; gsap.registerPlugin(Draggable);

Hi, I put my code in codesandbox but although it works in my local system, it doesn't work here at all, I hope you can help me. https://codesandbox.io/s/busy-dewdney-u7h30r?file=/src/App.js:3706-3718

I have an array that changes as the page scrolls in order of svg shapes, I need the first shape to be displayed on page load. Therefore, I entered the first path d manually and statically. When I scroll to the end of the page and then go back to the beginning, it does not display the first page. Therefore, I returned the first shape to the array, but now the first shape is displayed twice in a row, and I want each one to be displayed only once. I read the DOC, but I didn't get anything, maybe I didn't read it correctly for(let i = 0 ; i < heroSlides.length ; i++){ tl.to("#Tear",{ delay: 0.3, duration: 0.5, attr:{d:heroSlides[i].path,}}) .to("#rect",{attr:{style:`fill:${heroSlides[i].fill}`}, delay:0.75, },"-=0.3") .call(changeBoxes, [i],"-=0.4"); } const scroll = ScrollTrigger.create({ trigger: ".module", pin: true, scrub: true, start: 'top top', end: "max", animation: tl, // markers: true, pinReparent: true, fastScrollEnd: false, }); scroll.scroll();

Thank you very much, it worked. Sometimes the colors were not displayed correctly. I changed the set()s to to() and set Absolute time.

I wrote the following code to change the shape of svg, but this code has a problem. I want the color of #rect to change at the same time every time atr changes. Is it possible to do the same code with another solution? var tl = gsap.timeline({}); //2 tl.to("#Tear", { attr: { d: First } }); //3 tl.set("#rect", { attr: { style: "fill:#FB7185" } }).to("#Tear", { attr: { d: Second } }); //4 tl.set("#rect", { attr: { style: "fill: #38BDF8" } }).to("#Tear", { attr: { d: Third } }); //5 tl.set("#rect", { attr: { style: "fill: #A78BFA" } }).to("#Tear", { attr: { d: Fourth } }); const scroll = ScrollTrigger.create({ trigger: ".J02ig", pin: true, scrub: 0.5, start: "top top", end: "max", animation: tl // onToggle: self => console.log("toggled, isActive:", self.isActive), // onUpdate: self => console.log("direction:", self.direction) }); scroll.scroll();

I tried to make this slide in Rickett to learn: https://codepen.io/creativeocean/pen/OJgNyVm I get a TypeError error: _toArray is not a function. My code: https://codesandbox.io/s/optimistic-grass-w3wwt1?file=/src/App.js

@Carl Thank you very much, this helps a lot. Do you think it can be change right to left?

@Cassie How can I do this with the help of pixijs? I did a search on pixijs.io , but it confused me.

Yes, I want the element to be curved when turn. gsap has no solution?

Hello I'm going to make a digital book like a flipbook. By looking at the tutorials, I was able to make a typical right-to-left example, but the pages are not as soft as the pages of a real book. https://codesandbox.io/s/flipbook-rtl-k8w8f?file=/src/App.js:845-849

@OSUblake hi again. I used import {gsap} from "gsap / dist / gsap"; But it still has a problem.

Thank you a lot 💐

@PointC Thank you very much, I did not know it needs to be on before, I wrote according to the tutorials and examples Dagstart. 😁

I have a problem that I get this error when I want to output my project. I do not know if this problem is related to forums or not. "next": "^11.0.0" "react": "^17.0.2" import { getGlobalMatrix, Matrix2D } from "./utils/matrix.js";

Thanks, I used onClick and startDrag, ‌The click event runs correctly but not startDrag! Is there a way to run the gopage function when dragging instead of moving? https://codesandbox.io/s/test-drag-g9bkc