Jump to content
Search Community

Sam Tremblay

Premium

  • Posts

    28

  • Joined

  • Last visited

Community Answers

  1. Sam Tremblay test
    Sam Tremblay's post in How to recalculate ScrollTrigger Start and End after an element resize? was marked as the answer   
    Hi @BruceST!
     
    On your gsap.to that control your .one-one height, add this parameter:
    onComplete: () => { ScrollTrigger.refresh(); }  

    See the Pen OJwzwmz by sam-tremblay (@sam-tremblay) on CodePen
     
    Happy Tweening!
  2. Sam Tremblay test
    Sam Tremblay's post in adding delay on the div which follows the cursor (on react.js) was marked as the answer   
    Hello @amapic!
     
    Put a look on this example:
    import gsap from './gsap/index.js'; import gsapCore from './gsap/gsap-core.js'; class App{ constructor(){ this.moveLight(); } moveLight(){ const x = gsap.quickTo('#id_element_to_move', 'x', {duration: .5, ease: 'power2'}); const y = gsap.quickTo('#id_element_to_move', 'y', {duration: .5, ease: 'power2'}); window.addEventListener('mousemove', (e) => { x(e.clientX); y(e.clientY); }); } } new App();  
    Happy Tweening!
  3. Sam Tremblay test
    Sam Tremblay's post in Crossfade array without repeat was marked as the answer   
    Hello @aok!
     
    Try this:

    See the Pen wvxqEgW by sam-tremblay (@sam-tremblay) on CodePen
     
    EDIT: Hey @GreenSock, does kill the tween on each complete is a good mind to adopt or not?
  4. Sam Tremblay test
    Sam Tremblay's post in Unsuccesfull Tween, can't find gsap.to() was marked as the answer   
    Hillo!
     
    When you import, if you don't take the all.js, you need import index.js and gsap-core.js.
     
    You'll need the CSSPlugins.js file and others maybe and some utils too.. but you don't need to import them, just have it.
  5. Sam Tremblay test
    Sam Tremblay's post in Trigger some animation after SVG draw completes was marked as the answer   
    Hi Martin!

    You have multiples ways to do that.

    First, you can simply add an "onComplete" function to trigger when your SVG is completely draw.
    .from(".path-1", {drawSVG: 0, onComplete: () => {   console.log('Completed'); }}, 0)
    In an other hand, you can done your scrolltrigger inner a timeline and call your border-color change after like you do now, but like that:
     
    main.from(".path-1", {drawSVG: 0}, 0) main.to(".path-1", {stroke: '#ff0000'}); (For the example I change the stroke color of your SVG, but feel free to change it for do your stuff with the .box)
     
     
    Or, in your actual scrolltrigger code, you can use onLeave, onEnterBack function.
     
     
    Best regards!
    Sam
×
×
  • Create New...