Jump to content
GreenSock

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

Mauro.ie31

SimplyGreen

  • Content Count

    25

  • Joined

  • Last visited

Community Reputation

0 Newbie

About Mauro.ie31

  • Rank
    Member

Recent Profile Visitors

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

  1. Mauro.ie31 started following Multiple motionPath and ScrollTrigger animation sequentially on same element, Using SplitText Plugin in React Gatsby, Letters animation and 1 other
  2. Mauro.ie31
    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
  3. Mauro.ie31
    https://codepen.io/mauroie31/pen/xxEvMoG I modify a previous codepen to recreate the effect. Thanks for your help
  4. Mauro.ie31
    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.
  5. Mauro.ie31
    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?
  6. Mauro.ie31
    You are really great. Thanks for your help
  7. Mauro.ie31
    Sorry agait, but what you intend for "real native horizontal scrolling"? Thanks
  8. Mauro.ie31
    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
  9. Mauro.ie31
    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. Mauro.ie31
    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
  11. Mauro.ie31
    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
  12. Mauro.ie31
    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
  13. Mauro.ie31
    Wonderful. Thanks for your help.
  14. Mauro.ie31
    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
  15. Mauro.ie31
    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",
  16. Mauro.ie31
    Yes that works
×
Login Create Account