
Mauro.ie31
SimplyGreen-
Content Count
25 -
Joined
-
Last visited
Community Reputation
0 NewbieAbout Mauro.ie31

-
Rank
Member
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
-
Hi everyone, I'm trying to import plugin Split Text in my React Gatsby Application. So I installed gsap via npm and I don't have problems with other plugins but I really can't register SplitText. I'm trying to import as this: import { gsap } from "gsap"; import { SplitText } from "gsap/SplitText"; But i'm getting this error: 'Can't resolve 'gsap/SplitText' If you're trying to use a package make sure that 'gsap/SplitText' is installed. I've really lost lot of time. Thanks
-
https://codepen.io/mauroie31/pen/xxEvMoG I modify a previous codepen to recreate the effect. Thanks for your help
-
Hello, I'm trying to replicate the text animation on element with class "cb-tophead-title" from Cuberto. https://cuberto.com/services/digital/ Any way to achieve that? Thanks for helping.
-
Horizontal scroll with multiples and different child animation
Mauro.ie31 replied to Mauro.ie31's topic in GSAP
If it necessary I'll open a new topic. But is it possible to have a drag scroll ( horizontall drag specifically) that works with horizontal scroll trigger?- 10 replies
-
- pin
- animations
-
(and 3 more)
Tagged with:
-
Horizontal scroll with multiples and different child animation
Mauro.ie31 replied to Mauro.ie31's topic in GSAP
You are really great. Thanks for your help- 10 replies
-
- pin
- animations
-
(and 3 more)
Tagged with:
-
Horizontal scroll with multiples and different child animation
Mauro.ie31 replied to Mauro.ie31's topic in GSAP
Sorry agait, but what you intend for "real native horizontal scrolling"? Thanks- 10 replies
-
- pin
- animations
-
(and 3 more)
Tagged with:
-
Horizontal scroll with multiples and different child animation
Mauro.ie31 replied to Mauro.ie31's topic in GSAP
I'm sorry but it doesn't work. I have seven section with different width. For example: - Section 1 has 500vw, - Section2 has 200vw, - Section 3 has 200vw, etc. If I do this: - For the first section is ok, because it starts from zero. But from the second : gsap.timeline({ scrollTrigger: { trigger: "body", //6 è il numero delle sezioni totali - 1 start: 'top top-=' + (section2OffsetLeft - window.innerWidth / 2) * (containerWidth / (section2OffsetWidth * (6))) , end: '+=' + section2OffsetWidth * (maxWidth / (sect- 10 replies
-
- pin
- animations
-
(and 3 more)
Tagged with:
-
Horizontal scroll with multiples and different child animation
Mauro.ie31 replied to Mauro.ie31's topic in GSAP
I'm sorry but I'm not able to resolve this. I'm tryng to locate the first start of each section. Suppose I have three sections, #Section1, #Section2, #Section3. I want to locate the start and the end of each section, so I could apply gsap transition in the interval from the start and the end of each section. gsap.registerPlugin(ScrollTrigger); const sections = gsap.utils.toArray(".panel"); let maxWidth = 0; let index = 0; const getMaxWidth = () => { maxWidth = 0; sections.forEach((section) => { index++; switch (index) {- 10 replies
-
- pin
- animations
-
(and 3 more)
Tagged with:
-
Hello, I'm using Gsap Scroll Trigger with my all my entire pages. I have multiples sections. Every section has different child element. I want to know if it's possible to handle specific part of sections (for example, 15% of a specific one, the same as I do with normal vertical scroll ). But I don't know how to do it and I don't know if it's possible. Praticale example: In the codepen i want something like this this: Apply different animations on different child element of the same parent (.red) relatively to the actual parent that is in the viewport. Thanks for your
- 10 replies
-
- pin
- animations
-
(and 3 more)
Tagged with:
-
Multiple motionPath and ScrollTrigger animation sequentially on same element
Mauro.ie31 replied to Mauro.ie31's topic in GSAP
https://codepen.io/mauroie31/pen/dyXaXod I need to apply a transformation to the entire svg, but mantaining the secondary element (the red one in the codepen example) at the same position. Is there a way to apply the transform only to the big green element? Thanks -
Multiple motionPath and ScrollTrigger animation sequentially on same element
Mauro.ie31 replied to Mauro.ie31's topic in GSAP
Sorry, but why if I put a normal div inside, external from the svg, it doesnt follow the circlePath? Then I apply the transform to "#div" insthead of #small <svg id="greenCircles" viewBox="0 0 300 200"> <circle v-on:click="readMore()" cx="300" cy="100" r="100" stroke="none" fill="#53877e" /> <g > <circle cx="400" cy="100" r="20" stroke="none" /> </g> <circle id="circlePath" cx="300" cy="100" r="100" stroke="none" fill="none" /> </svg> <div id="div" styl -
Multiple motionPath and ScrollTrigger animation sequentially on same element
Mauro.ie31 replied to Mauro.ie31's topic in GSAP
Wonderful. Thanks for your help. -
Multiple motionPath and ScrollTrigger animation sequentially on same element
Mauro.ie31 replied to Mauro.ie31's topic in GSAP
Specifically, I have this pinned container: gsap.to('#areas-el-content', { scrollTrigger: { trigger: '#areas-el-content', start: '-100% top', end: '+=3500', pin: true, scrub: 1, }, }); This Pinned container, last 3500 px scroll (end: +=3500) from the start. In this case I want to apply different animations on different height of pinned content. - First animation starts at 200px and finish at 800px of the pinned cont -
Hi there, probably I have problem understanding scrolltrigger sequence on animation on same element. So, I have this first animation, using motionpath, that starts from bottom and arrive at center of the green circle of the example, with this code: ** * First animation */ gsap.to("#div", { duration: 5, repeat: 0, repeatDelay: 0, yoyo: false, opacity: 1, ease: "power1.inOut", motionPath: { path: "#path",
-
Yes that works