Jump to content
Search Community

Dennyno

Members

  • Posts

    186

  • Joined

  • Last visited

 Content Type 

Posts posted by Dennyno

    PinSpacing fix

    in GSAP

    Posted

    Hi folks,

    since a while I don't touch GSAP, sadly.

    I making a reveal section, but I was trying to get a height which might be less than 100vh or 100svh (example 60vh) and on mobile I end to get a huge white pinspacing before seeing the next black section placeholder.

    If setting pinspacing false, I cant see all timelines animations.

    Which is the right way, as I can't remember?

    Setting 100vh (or 100svh) of course the problem goes way, as on my demo)...

    Thanks for any hint, as usual

     

    See the Pen ExMeBvE by DedaloD (@DedaloD) on CodePen

    Svg morph fixing

    in GSAP

    Posted

    Hey! Thanks @alig01 

    I was playing with your code, but seems bit hard to inject also scrolltrigger and have each function working together.
    btw.. thanks for your time :)

      

    gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);

MorphSVGPlugin.convertToPath("circle, line");

let roundtext = document.querySelector("#textPath");
let masterTl = gsap.timeline({
  scrollTrigger: {
    trigger: "body", // or whichever element you want to listen for scroll events on
    start: "top top+=20", // animation starts when top of your trigger hits the top of the viewport
    end: "bottom bottom", // animation ends when bottom of your trigger hits the bottom of the viewport
    scrub: true, // enables scrubbing
    markers: true // Optional, shows markers where animation starts and ends
  }
});

let tl = gsap.timeline({ defaults: { ease: "none", duration: 5 } })
  .to(roundtext, {
    attr: { startOffset: "50%" }
  });

masterTl.add(tl);

let tl2 = gsap.timeline({ repeat: -1 })
  .to("#text", {
    rotate: -360,
    transformOrigin: "50% 55%",
    ease: "none",
    duration: 20
  });

masterTl.add(tl2);


     

    Svg morph fixing

    in GSAP

    Posted

    5 hours ago, Rodrigo said:

     

    Thanks, I already did circle transitions sometimes, but the problem is applying the text and swap from primary path to secondary one.. even changing the use xlink from first, to second one... seems that the text follows only the main path and ends it's life there.

    Gonna test tomorrow btw, thanks for the hint.

    Also thanks to you @Trapti :)

     

    Hopefully this helps.

    Happy Tweening!

     

    Svg morph fixing

    in GSAP

    Posted

    Hi all.

    How can I achieve the following complex result:

    the text path should start as already does (from left, following masterPath), then entering in the circle path, then the text should play endless inside that circle with a new infinite timeline. 

    Basically I can make an hidden element and show it onEnd, but I guess there should be any clever gsap solution to morph the text path from the main one, to the circular one; then finally the image should appear.

    Thanks for any help

    See the Pen qBLmBwX by DedaloD (@DedaloD) on CodePen

    Pinned section bug

    in GSAP

    Posted

    Also my section height is 650vh (tested also more), but

    1) the text is not even appearing
    2) the phone svg is being cut but I guess it's already pinned too inside the parent section.

    Basically seems that flex-start breaks the whole code, while basically need to put that phone + images grid left aligned at then end of it's animations 

    Btw, thanks for any help 🫶💚

    Pinned section bug

    in GSAP

    Posted

    Hi guys,

    which could be the solution to allow me viewing previous and next sections before and after the animated one?
    I got a pinned element, but need to pin it  only when required (more as sticky, intead of fixed).

    EXAMPLE: A, B and C should not overlap the animated grid...

    Thanks :)

    See the Pen rNQeVVg by DedaloD (@DedaloD) on CodePen

    invalid morph to

    in GSAP

    Posted

    Other related question: why MorphSVG gives error on the following path, saying that #dashedline is malformed?

      

    <svg id="connect-svg" viewBox="0 0 600 1200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="theMask" maskUnits="userSpaceOnUse">
  <path id="dashedline" class="theLineFull" d="m 157.895 241.085 c 62.561 116.897 125.079 109.776 231.114 78.452 c 287.882 -85.044 218.659 252.607 92.469 182.304 c -297.336 -165.652 -408.952 -5.205 -349.65 134.907 c 18.98 44.844 52.093 45.918 87.291 22.143 c 33.356 -22.531 13.046 -93.807 -23.654 -106.86 c -240.436 -85.514 -209.354 143.18 -51.712 160.189 c 220.7 23.813 19.633 358.903 -114.115 347.002" fill="none" style="stroke:hwb(0deg 100% 0% / 70%)" stroke-linecap="round" stroke-miterlimit="10"></path>
    </mask>
  </defs>
  <g mask="url(#theMask)" class="theLine">
    <path d="m 157.895 241.085 c 62.561 116.897 125.079 109.776 231.114 78.452 c 287.882 -85.044 218.659 252.607 92.469 182.304 c -297.336 -165.652 -408.952 -5.205 -349.65 134.907 c 18.98 44.844 52.093 45.918 87.291 22.143 c 33.356 -22.531 13.046 -93.807 -23.654 -106.86 c -240.436 -85.514 -209.354 143.18 -51.712 160.189 c 220.7 23.813 19.633 358.903 -114.115 347.002" fill="none" style="stroke:hwb(0deg 100% 0% / 70%)" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="5" stroke-width="1" stroke-dasharray="10"></path>
  </g>
  <circle class="ball ball01" r="6" cy="220.572" cx="150" fill="#fff"></circle>
</svg>

     

    Thanks

    invalid morph to

    in GSAP

    Posted

    Hi all, the following code works smoothly (I guess so), but I think there's an issue somewhere because randomly I got a huge an annoying 

    WARNING: invalid morph to: #ra-yt-ad

    WARNING: invalid morph to:  #ra-bf-ad
    WARNING: invalid morph to: #ra-mac-screen

    Could it be caused by the prefetch links I got in header?
    Any hint how to fix this? (Using Barbajs it takes no-time to have a long error log).

    I tag @Carl as I bet he could have an easy solution for svg related stuff :) - but I'm open to any help :P
     

    See the Pen VwEXVeE by DedaloD (@DedaloD) on CodePen

    Draggable with Physics and Throw Props Inertia collision (mimic of Matterjs)

    in GSAP

    Posted

    Yep, I'll quitely wait here :)
    I spent the whole week looking for something gsap related and did some tests..
    basically the splitTexted texts are draggable, but even setting absolute position and display:block... nothing works on my side, also inside GSAP Codepen's... seems that Draggable and Physics2D plugin (specially the second one) showcases... seems "abandoned" with the few demos available.
    I'm joking 😅 btw I found nothing that could fit

    Draggable with Physics and Throw Props Inertia collision (mimic of Matterjs)

    in GSAP

    Posted

    Hi all, starting from this example basic pen and @OSUblake one 

    See the Pen a820ab5bf748b4d1f45083edb2a0843f by osublake (@osublake) on CodePen

     is possible to achieve the same as 

    See the Pen LYJEoZM by gayane-gasparyan (@gayane-gasparyan) on CodePen

     falling and draggable words with collision bouncing event?

    Is something GSAP could do, even not being a 2D canvas engine?

    See the Pen ALgdjV by GreenSock (@GreenSock) on CodePen

    Performance Upgrade? + Merging with Acceletometer Values

    in GSAP

    Posted

    Hi @GreenSock this way?

      

    function parallaxMoveDesk() {
  const gyros_container = document.querySelector('.container-gyro');
  if (gyros_container) {
    const gyros = gyros_container.querySelectorAll('.figure-img_gyro');
    const movementRange = 30;

    gyros_container.addEventListener('pointermove', e => {
      const relX = e.clientX;
      const relY = e.clientY;

      gyros.forEach((gyro, index) => {
        const movement = (index % 2 === 0 ? movementRange : -movementRange) * 0.01;
        const moveX = (relX - window.innerWidth / 2) * movement;
        const moveY = (relY - window.innerHeight / 2) * movement;

        gsap.quickTo(gyro, {
          xPercent: -moveX,
          yPercent: moveY,
          duration: 0.3, // Use a shorter duration
          ease: 'power2.out'
        });
      });
    });
  }
}



    On the other pen you can see anything as it's inside a codepen iframe and needs grant on mobile to use gyroscope, btw I solved thanks :)
    This code using quickTo seems not working (or am I missing something?)

    Performance Upgrade? + Merging with Acceletometer Values

    in GSAP

    Posted

    EDIT: The issue in on the second pen. Seems url are reversed 😅

    Just to know if is there any performance boost I may add or fix?
    Using gsap quicksetter might be a game changer?

    Also I am finding issue while merging this pen with another one to use acceletometer values, any help into that route?

    Using CSS values or setting attributes, everything someway works, but from my side, using GSAP I see nothing moves.

    Do I need maybe, to fetch first the device alfa, beta and gamma values before loading gsap? 

    See the Pen dyqaBrK by DedaloD (@DedaloD) on CodePen



    Maybe the problem is that I need first user permission, and this may get issues with gsap values?



     

    See the Pen VwGREpL by DedaloD (@DedaloD) on CodePen

    Reverse stacking cards

    in GSAP

    Posted

    Oh Gosh!

    Thanks a lot! My today's saver.

    I was randomly trying crazy things like starting:bottom bottom-200, ending bottom-200 top.. lol...

    Really thanks, your solution is even better from what I've been looking for :D 

    Reverse stacking cards

    in GSAP

    Posted

    Hi @mvaneijgen, this pen may render better the idea 

    See the Pen MWmVwpX by GreenSock (@GreenSock) on CodePen

    , exactly the opposite effect of this current pen...

    Im blocked also with the positioning values. 

    Need to show the red part a little, then "swipe" one card at time via scrolltrigger. I can remove the sticky position and pin the cards, but... where to pin them to achieve the result? Bottom? (I thinking like reversing the demo pen which works pinning on top). This can we easily achieved using something like Swiperslider o any slider framework, but I prefer bangin my head and trying a GSAP solution

    Yep the red part si the trapeze I meant, lol... 😂 

    Thanks a lot :)

     

    stacking-from-bottom.jpg

    • Like 1

    Reverse stacking cards

    in GSAP

    Posted

    Hi all,

    I'm blocked to achieve the opposite animation of this pen 

    See the Pen dyeYdRK by davedublin (@davedublin) on CodePen

     : 

    Need to start each card smaller from the above one, (like a reverse trapeze / cone to give you the idea of the overall shape), then scale a card below, when its previous sibling one has gone (gonna handle values latelly.. actually just need to understand).

    Tried all day with no luck...

    I guess I can go for 4 custom animations for each card, but I bet there may be a loop solution for a stupid thing like this.

    Actually exactly the opposite  of many demo I've seen... and sadly I'm using position sticky (maybe making the solution harder).

    Thanks for any help here.

    See the Pen oNPqbvy by DedaloD (@DedaloD) on CodePen

    carousel - find the center item and scale; draggable, scrolltrigger

    in GSAP

    Posted

    Or basically use Observer to get z-index values, the highest one it always the middle one.

    This is the same, using gsap.ticker

      

    const listItems = document.querySelectorAll('.list-container li');
let highestZIndexItem = null;

function updateHighestZIndexItem() {
  const newHighest = Array.from(listItems).reduce((highest, item) => {
    return parseFloat(item.style.zIndex) > parseFloat(highest.style.zIndex) ? item : highest;
  });

  if (newHighest !== highestZIndexItem) {
    if (highestZIndexItem) highestZIndexItem.classList.remove('highest-z-index');
    highestZIndexItem = newHighest;
    highestZIndexItem.classList.add('highest-z-index');
  }
}

gsap.ticker.add(updateHighestZIndexItem);


    I used this quick solution once, as I didn't want to make another carousel my own.. and simply I used the one provided by the examples.

    Tbh, there are many better ways, as @Cassie said :)

    EDIT: on the second example, should be good going by size intead, as there's no z-index diff
     

    • Like 1
1
2
3
...
8
Page 1 of 8  
×
×
  • Create New...