Jump to content
Search Community

AllenIVe

Premium

  • Posts

    21

  • Joined

  • Last visited

 Content Type 

Posts posted by AllenIVe

    Scrolltrigger Drawsvg and motionpath

    in GSAP

    Posted

    thanks @mvaneijgen for the advice, now I managed to get it working well.
    I have another problem, the svg has a transform matrix by default 

     <circle class="ball ball00" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 852 125)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/>
<circle class="ball ball01" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 852 125)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/>
<circle class="ball ball02" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 964 195)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/>
<circle class="ball ball03" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 1052 300)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/>
<circle class="ball ball04" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 1098 422)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/>
<circle class="ball ball05" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 1098 566)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/>
<circle class="ball ball06" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 1052 692)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/>
<circle class="ball ball07" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 964 798)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/>
<circle class="ball ball08" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1 0 0 1 852 868)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4"/>

    When the page renders these are different 

      <circle class="ball ball00" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,5.5,322.314)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="opacity: 1; visibility: inherit; translate: none; rotate: none; scale: none; transform-origin: 0px 0px;" data-svg-origin="2 2"></circle>
<circle class="ball ball01" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,806,125)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle>
<circle class="ball ball02" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,918,195)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle>
<circle class="ball ball03" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,1006,300)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle>
<circle class="ball ball04" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,1052,422)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle>
<circle class="ball ball05" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,1052,566)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle>
<circle class="ball ball06" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,1006,692)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle>
<circle class="ball ball07" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,918,798)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle>
<circle class="ball ball08" cx="13.5" cy="13.5" r="11.5" transform="matrix(-1,0,0,1,806,868)" fill="#F5F5F0" stroke="#C8C3B9" stroke-width="4" style="transform-origin: 0px 0px; translate: none; rotate: none; scale: none; opacity: 0;" data-svg-origin="13.5 13.5"></circle>

    my code doesn't act on that specification, what could it be?

      

    gsap.defaults({
  ease: "none"
});
ScrollTrigger.defaults({
  //   markers: true
});
//  gsap.set(".ball", { xPercent:0, yPercent: 0 });

var tl = gsap
  .timeline({
    defaults: {
      duration: 0.3,
      //   autoAlpha: 1,
      transformOrigin: "center",
      ease: "elastic(2.5, 1)"
    }
  })
  .from(".ball01, .text01", {
    opacity: 0
  }, 0.31)
  .from(".ball02, .text02", {
    opacity: 0
  }, 0.37)
  .from(".ball03, .text03", {
    opacity: 0
  }, 0.42)
  .from(".ball04, .text04", {
    opacity: 0
  }, 0.47)
  .from(".ball05, .text05", {
    opacity: 0
  }, 0.53)
  .from(".ball06, .text06", {
    opacity: 0
  }, 0.56)
  .from(".ball07, .text07", {
    opacity: 0
  }, 0.61)
  .from(".ball08, .text08", {
    opacity: 0
  }, 0.63);

var action = gsap
  .timeline({
    defaults: {
      duration: 1
    },
    scrollTrigger: {
      trigger: ".wrapper svg",
      scroller: ".scroll__stage",
      scrub: true,
      start: "center center",
      end: "center top",
      preventOverlaps: true,
      anticipatePin: 1,
      pin: ".wrapper "
    }
  })
  .to(".ball00", {
    duration: 1,
    autoAlpha: 1
  })
  .from(".theLine", {
    drawSVG: 0
  }, 0)

  .to(
    ".ball00", {
      motionPath: {
        path: ".theLine",
        alignOrigin: [0, 0]
      }
    },
    0
  )
  .add(tl, 0);

    Thanks

    Scrollsmother

    in GSAP

    Posted

    Hey Guys,

     

    I'am new on scrollsmother, is there any possibility to use the sticky function like on scroll locomotives?

      

    <div class="sticky_div" data-scroll="" data-scroll-sticky="" data-scroll-target="#home__secondo_blocco_fixed" data-events="scroll">  <div class="title-2"> <h2>Is indecisiveness<br>
stopping your<br>
growth?</h2>
</div> </div>

    Thanks,

    Problems with jumping scroll on mobile scrolltriggers

    in GSAP

    Posted

    Hello guys,

     

    we are working on a new project, but we have a big problem on mobile.

    We use both scrolltrigger and locomotives scroll, on mobile once the user stops scrolling he is sent back to the top of the page.

    I can't understand what the problem is, we have entered several console logs when refreshing locomotives and also scrolltriggers..

    Can anyone give us a hand?

     

    I think the problem was here 

     

    locoScroll.on("scroll", ScrollTrigger.update);
     
    // tell ScrollTrigger to use these proxy methods for the ".data-scroll-container" element since Locomotive Scroll is hijacking things
    ScrollTrigger.scrollerProxy(".site", {
     
    scrollTop(value) {
     
    return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
     
    }, // we don't have to define a scrollLeft because we're only scrolling vertically.
    getBoundingClientRect() {
     
    return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
    }
     
    });

     

    If i wrap this inside a  

    if ($(window).width() >= 768) {   

     

    media query, all works fine, but i need a clean solution. 

     

    http://rambl.oneupstudio.it/

     

     

    Scroltrigger error

    in GSAP

    Posted

    Hello guys,

     

    I am developing a sit with different transition and barba js, this error often happens after a page transition, but I can't understand in which part of the code as it doesn't give me any reference to my scripts

     

    What could it depend on? 

      

    ScrollTrigger.js?ver=5.6:605 Uncaught TypeError: Cannot read property 'splice' of undefined
    at Tween.Se.refresh (ScrollTrigger.js?ver=5.6:605)
    at _callback (twennmax.js?ver=5.6:10)
    at _renderZeroDurationTween (twennmax.js?ver=5.6:10)
    at Tween.render (twennmax.js?ver=5.6:10)
    at Timeline.render (twennmax.js?ver=5.6:10)
    at ea (twennmax.js?ver=5.6:10)
    at updateRoot (twennmax.js?ver=5.6:10)
    at twennmax.js?ver=5.6:10
    at Array.forEach (<anonymous>)
    at kk (twennmax.js?ver=5.6:10)

     

    Scrolltrigger and Locomotive scroll

    in GSAP

    Posted

    4 minutes ago, akapowl said:

     

    Hey @AllenIVe

     

    They are, because you set horizontal to true, when in fact you are not scrolling horizontally, but vertically and just mimicing a horizontal scroll.

     

    Just remove the horizontal: true on your ScrollTrigger(s).

     

    Cheers.

    Paul

    Thanks for the fast reply, this works for the markets, but toggle enable doesn't work too. 

     

    Trigger gives the enable class on all elements together and remove it on the same times on all elements

    Scrolltrigger and Locomotive scroll

    in GSAP

    Posted

    On 11/25/2020 at 12:37 AM, ZachSaucier said:

    Hey Allen. I'm not understanding what you're trying to accomplish. You say you need what the demo does but horizontal... but it is already horizontal? Can you please try to clarify your goals?

     

    Thee markets are in bbad position too, i can't understand why, can you help me ? 

     

    Thanks

    Scrolltrigger and Locomotive scroll

    in GSAP

    Posted

    Hi Guys!

    I have been struggling for a while on this animation, I have made many attempts but without success.

     

    Now i need your help!

     

    I have a scroll slider and need to change the background image based on active years tiles, like this reference but in horizontal mode...

     

    Anyone can help me? I need to set active class on years tile and fade in / out the img in slider-years 

     

    Thanks in advance!

     

     

     

    See the Pen bGwbgQo by IveSix (@IveSix) on CodePen

    This skew effect when using draggable?

    in GSAP

    Posted

    On 9/19/2018 at 5:08 PM, GreenSock said:

    I love a challenge, so I took a crack at it here: 

     

    See the Pen JawEyN?editors=0010 by GreenSock (@GreenSock) on CodePen

     

    Notice that it skews in a more natural way based on where you grab it, so if you grab the top, it'll skew in the direction you pull and if you grab on the bottom, it skews the other way so that it feels like it's being pulled by the mouse similarly. 

     

    It uses a proxy as well as velocity tracking. I made it stop immediately whenever the user presses down while it's moving too, killing that lerp stuff. Hopefully it feels pretty natural. 

     

    Does that help? 

     

     

    Amazing! 

     

    If i want to add a snap on this carousel? how can I do it? 

     

     

    GSAP timeline over element

    in GSAP

    Posted

    im try to fire timeline when a li it's hover, so i create a var with my timeline, and with event.delegateTarget to find children and not all with .CLASS

    this is my code

     
    $(".gb-help-list ").on('mouseover', 'li', function (e) {
	console.log('mouse');
	var tl = new TimelineLite();
		 	tl.to($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut})
			.to(".line-help", 2, {width: '100%', ease: Power4.easeOut}, "-=1");

}).on('mouseout', 'img', function (e) {
    TweenLite.to($(e.delegateTarget).find('span'), 1.5, {opacity:0});
  });

    I don't see any error in console, but this : o($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut} doesn't fire....

    anyone can helpme?

    Thx in advance

     

×
×
  • Create New...