_Greg _

Hi! On my old demo i try 3.3.2 version of ScrollTrigger. ScrollTrigger with id 'Change between slides" stop working, what changed on this version? ScrollTrigger.create({ trigger: '.pinwrapper', start: `center center`, end: "center center", markers: true, id: "Change between slides", animation: tl_inout, toggleActions: "restart complete reverse complete" }) Thank you!

Thank you! Yes, its not a problem with ScrollTrigger, its problem with my code So maybe you can delete this post?

Thank you! I find with ScrollTrigger.getAll() one element from list of triggers, witch get that error. I will try to fix it. I try disable ScrollTrigger.refresh(); but trigger did't work with my code well (wrong place triggers on the page)

Hi! After 1-30 times of page reload (without update cache) i have Error On my app.js:13 code: window.addEventListener('load', function(){ gsap.registerPlugin(ScrollTrigger); ScrollTrigger.refresh(); }) I try to create codepen demo, but on codepen i did't see any errors on console How can i catch or debug this type of error?

Hi! Please read official documentation about Events https://greensock.com/docs/v3/Plugins/ScrollTrigger On Demos part of Documantion page you can find official demo with Callbacks https://codepen.io/GreenSock/pen/qBdeVJY

I update Codepen demo (add one more pin element on page) all working good, on my video is not working

Thank you, i sent you message

I test it on my local project GSAP v 3.3.1 and ScrollTrigger v 3.3.1 and have some more issue with onRefresh and how ScrollTrigger count trigger height, how can i sent private link on youtube video?

Yes. Thank you! Everything works great! ❤️ GSAP is always on top Can copy that version to my local project before release? ScrollTriger with GSAP is the best!

Hi! Did you check official demo of GreenSock? https://codepen.io/GreenSock/pen/KKpLdWW?editors=0010 Does it have same lags? On your demo i have lags with scrolling on my PC (Chrome 84.0.4147.30, Win10) but on official demo all working well

Hi. ScrollTrigger is great! I want to stop play again animation after i leave and back to browser tab. As you can see on my example if you scroll down page to position when tl_inout played (green box will be on screen) and switch browser tab and then back (or just resize browser) - animation will start play from beginning. I wan't that animation will be in same place (if before trigger it must be on progress(0), if after trigger - progress(1)) I think i do somthing wrong. i try add this but its not working: onRefresh: ({progress, direction, isActive}) => { if(direction === 1){ tl_inout.progress(1) }else if(direction === -1){ tl_inout.progress(0) } } And sorry for my english And sometimes you get result like on screen:

Ohhh.. yes, you're right, I did not pay attention Thank you, Jack.

Hi! Can someone help me, i can't find error. I want to create simple animation with hide/show some div's using jQuery and GSAP Everything work well but in console i have error: Uncaught Cannot tween a null target. $(document).ready(function ($) { if($('#teamBio').length){ var bioText = $('.bioText'), teamBtns = $('.btns'), longBio = bioText.find('.longBio'), certBio = bioText.find('.certBio'), shortBio = bioText.find('.shortBio'); teamBtns.each(function(i){ var tl_blocks = new TimelineMax({paused:true}); tl_blocks .fromTo(teamBtns[i], 0.3, {width:"40%", autoAlpha:1}, { width: "0%", autoAlpha:0}) .fromTo(bioText[i], 0.3, {width:"60%"}, { width:'100%'}, "-=0.3") .to(shortBio[i], 0.3, {autoAlpha:0, display:"none"}) .to([longBio[i], certBio[i]], 0.3, {display:"block", autoAlpha:1}); $(this).click(function(){ tl_blocks.play(); return false; }) }); } });

Try on old phone (512 RAM, 800MHz processor, Android 2.3.3) with Opera Mini - working good (sandwich icon not on center of a circle, but its Opera Mini)

Thank you Carl, I find answer in this forum! What i get with your help http://test.rezniklawyers.com/whoweare.html (carousel, with mouse move and press) I use your answer on other topic (http://greensock.com/forums/topic/7907-reversing-timeline-animation-and-repeating-it-infinitely/?p=30278): var tween = new TimelineMax({ onComplete: complete, onCompleteParams: ['{self}'], onReverseComplete: reversethis, onReverseCompleteParams: ['{self}'] }); Then control by: tween.progress(some_variable_witch_calculate) But have some trouble with CPU usage when carousel moving , and now working with mobile adaptive to 'pan'/'swipe' events

I update Codepen and try clarified the issue: 1. we move from left to right from 0 to left: '-=' distance 2. Then we want to reverse (press .btn-right) and animation must move from $this (were is box now) to 0, then change direction to left: '+=' distance, then all tween.play() commands working with this ('+=') direction 3. now all move from 0 to left : '+=' distance 4. When we press btn-left distance again change to '-=' Thanks for your answer!

Thanks, it very helpful, but i understand, that with TweenLite/TweenMax i can't use play(), pause(), reverse() commands? How can i control playback? I find on Docs: Special Properties and Callbacks: onUpdate and onUpdateParams Can i use this callback functions to Update value1 value1 = direction + '=' + distance; I update Codepen and try clarified the issue: 1. we move from left to right from 0 to left: '-=' distance 2. Then we want to reverse (press .btn-right) and animation must move from $this (were is box now) to 0, then change direction to left: '+=' distance, then all tween.play() commands working with this ('+=') direction 3. now all move from 0 to left : '+=' distance 4. When we press btn-left distance again change to '-=' Thanks for your answer!

HI, i don't understand how can i dynamic update values on tween: Example in attach. Code: $(function () { var tween = new TimelineMax({paused: true}), box = $('.box'), leftBtn = $('.btn-left'), rightBtn = $('.btn-right'), direction = '-', distance = 500, value1= direction + '=' + distance; function directionMove(playk) { if (playk == 'playk') { direction = '-'; value1 = direction + '=' + distance; // how to update value tween.play(); } else if (playk == 'reversk') { direction = '+'; value1 = direction + '=' + distance; //how to update value tween.play(); } } tween .to(box, 15, {css: {x: value1}, ease: Linear.easeNone}); // no need move by default leftBtn.on({ click: function () { directionMove('playk'); } }); rightBtn.on({ click: function () { directionMove('reversk'); } }) }); I want update value1 dynamic (on this example: onClick). I can find solution, can you help me, Thanks!