Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Newbie

About Mauro.ie31

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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
  2. https://codepen.io/mauroie31/pen/xxEvMoG I modify a previous codepen to recreate the effect. Thanks for your help
  3. 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.
  4. 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?
  5. Sorry agait, but what you intend for "real native horizontal scrolling"? Thanks
  6. 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
  7. 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) {
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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",