Jump to content
Search Community

David Chavez

Members
  • Posts

    2
  • Joined

  • Last visited

Posts posted by David Chavez

  1. Okay, sorry for not being clear, I'll try to be concise

    I couldn't replicate the problem in codepen (it works as expected)

    See the Pen zYaVQKJ by ATOMICHAVEZ (@ATOMICHAVEZ) on CodePen

    The problem in the live site is that the two elements that have the "pin" applied get wrapped in a pin-spacer with top inset of 120px and 240px respectively. I don't understand where these insets come from, as you can see in the image below the elements get shifted downwards because of this and is not the expected behavior

     

    image.thumb.png.c2d936f145d2b49076184ebe07b401ed.png

     

     

  2. Hello

     

    I'm having a similar problem but here the inset values created by the pin-spacer are actually breaking the design, any clues on how to remove this inset?

    Here is a demo of the site https://otra-9d8f98.webflow.io/info2-copy and the elements in question are the ones in magenta border

     

    image.png.27c6789d62ac09f2b071bbf07aae34e9.png

     

    this is the JS code being used and in the bottom some images from the inspect

     

    <script>
    	gsap.registerPlugin(ScrollTrigger)
    	  var actionContact = gsap.to('#sticky-contact', { border: 'solid 1px magenta', ease: 'none', duration: 0.25 });
    	var actionServicios = gsap.to('#sticky-servicios', { border: 'solid 1px magenta', ease: 'none', duration: 0.25 });
    
      ScrollTrigger.create({
        trigger: ".banner-top",
        start: "bottom top",
        end: 'max',
        markers:true,
        pin: '#sticky-contact',
        pinSpacing: false,
        animation: actionContact,
        toggleActions: 'play reverse play reverse'
      });
    
    	ScrollTrigger.create({
        trigger: ".banner-top",
        start: "bottom top",
        endTrigger: ".section-15",
        end: 'top bottom',
        markers:true,
        pin: '#sticky-servicios',
        pinSpacing: false,
        animation: actionServicios,
        toggleActions: 'play reverse play reverse'
      });
    
    </script>

     

    image.png.449c4e6d61815a1071285858ad680a87.pngimage.png.a8b6426973810d6b8012600704a3a6db.pngimage.png.fc6f6ab28e552b6b21fc87f960f6fc11.png

     

    image.png

×
×
  • Create New...