Lacika1981

Thank you @ZachSaucier It works now as I wanted it.

Hi, Please see my pen on codepen. I try to find out with not much luck how to start animate again as the first timeline tween finishes. The animation last for 10s and the secong tween starts at 5s just at the middle. However as the first tween finishes it does not repeats again until the second tween finishes. I cannot find out how to solve this.

Thank @ZachSaucier, I saw your answer just now and already made something else that is not working(yet). I will put that question in a new thread as it is a bit different question.

Thank you @ZachSaucier I try to update the code as you recommended.

Hi, I am wondering if timeline can be played less than 0 when animation reversed. Please see my pen. I would like the animation to be playing in reverse even it has reached the start time. You can control the animation direction scrolling the mouse wheel. Can it be done somehow? It stops now as it reaches progress 0. There is no problem to play in forward direction as the repeater function does it job and it works as expected in reverse mode as well. I tried to create separate timeline for the repeater function and tried to set progress: 1 for the timeline starts at line 48. My question might be confusing.

Thank you @Rodrigo It did the trick. Thank you @Shaun Gorneau and @Carl as well for the help. I think using the config object I can rid of the changeImage function as well.

Thanks Carl, Actually that changeImage function does not do much during the animation. I only have that one because when the animation stops at "tl.duration() * .2" time than 3 images has opacity more than 0. It means the image looks blurry. That function just changes 2 of the 3 images' opacity to 0. Not well optimised yet as it goes through the whole array as soon as the animation stops. The problem happens when you change the slide while the animation is still running. This line of code is used to change the opacity TweenMax.staggerTo(images, .1, { opacity: 1, immediateRender: true, onComplete: function() { this.target.style.opacity = 0; } }, .035); I am sure you understand what it does. It goes through the images one by one, change their opacity to 1 and as soon the animation is done then change it back to 0. The problem happens when you change the slide and therefore reverse the animation. animation plays forward tl.tweenFromTo(t, 'a'); animation plays backward tl.tweenFromTo(t, 'b'); If the animation runs backward (have not finished yet) and reverse it than 1 or 2 images still has/have opacity 1. This is what you can see on the last image that two divs still have opacity 1. And on the video above you can see a frame there as solid. This is caused by this bug. If the animation runs forward and reverse it then this problem has never happened. In codepen open the dev tools and click on the 'image-sequence' div to see all the divs inside. You can see as their opacity changes during the animation.

Hi, I have made some changes and it works now. Here is the link: https://codepen.io/Lacika1981/pen/xMeLWB Open up the console and search for the DIV with class 'image-sequence'. Click on Test 2 link first and then Test 3 link. After click on these buttons alternately. You can see the divs inside the 'image-sequence' container changing their opacity. Sometimes the opacity does not change back to 0 but stays 1. It only happens if you click on Test 3 link while the animation is active(change from orange to green). I added a new image to show that the opacity did not change back to 0 on two divs.

I have found something to change. I will do later tonight.

Thank you @Rodrigo I will create one however yours one looks absolutely fine. But the swiper.js is not initialized for some reason

I have created a pen but it does not want to work Could you have a look on that please? I believe everything is there and I get the following error message project-ca632744d417f98f7043.js:1 Error: GraphQL error: Field 'pen' doesn't exist on type 'ProjectUrls' https://codepen.io/Lacika1981/project/editor/ZMMekO

Thank you for your response, Yes it does the same with empty divs. I will create a pen a bit later with empty divs

The problem was caused by the "left" property. TweenMax.fromTo('.image-sequence', 3, { left: '60%' }, { left: '-30%' }); Using "x" property and the problem gone. TweenMax.fromTo('.image-sequence', 3, { x: '60%' }, { x: '-30%' });

Hi, I have got an issue in Firefox. Same code as in my last topic. https://greensock.com/forums/topic/19872-render-issue-tweento/ In Firefox the element is not moving accross the screen. Please see the video

Hi, I have got a little problem. When I reverse the animation than it sometimes does not change the opacity to '0' of an image in the sequence. I can not create a project as I am not a premium member and codepen does not let me to upload files. I created two videos. One of the animation and one of the DOM. The script changes the opacity of each image and showing it as a movie. Here is my script(It same as it is in the callback issue from yesterday): $(function() { var images = $('.image-sequence img'); var tl = new TimelineMax().pause(); mySwiper.on('slideChangeTransitionEnd', function() { if (mySwiper.realIndex === 1) { $('body').addClass('active-skeleton'); animateSkeleton(); } else if (mySwiper.realIndex === 2) { $('body').addClass('active-skeleton'); finishSkeletonAnimation(); } }); mySwiper.on('slideNextTransitionStart', function() { if (mySwiper.realIndex === 3) { $('body').removeClass('active-skeleton'); } }); mySwiper.on('slidePrevTransitionStart', function() { if (mySwiper.realIndex === 0) { $('body').removeClass('active-skeleton'); } }); function changeImage() { console.log('changeImage') setTimeout(function() { for (var i = 0, l = images.length; i < l; i++) { if (images[i].style.opacity > 0 && images[i].style.opacity < .9) { images[i].style.opacity = 0; } } }, 25); } var fp = TweenMax.staggerTo(images, .1, { opacity: 1, immediateRender: true, onComplete: function() { this.target.style.opacity = 0; } }, .035); var sp = TweenMax.fromTo('.image-sequence', 3, { left: '100%' }, { left: '30%' }); tl.add([fp, sp], 0); tl.add(['a', changeImage], tl.duration() * .2); tl.add(['b', changeImage], tl.duration() * .99); // window.addEventListener('') function animateSkeleton() { if (mySwiper.previousIndex === 0 || mySwiper.previousIndex !== 2) { if ($('.image-sequence').hasClass('first-part-played')) { tl.progress(.2); } else { tl.tweenTo(tl.duration() * .2); $('.image-sequence').addClass('first-part-played') } } if (mySwiper.previousIndex === 2) { var t = tl.progress() * tl.duration(); tl.tweenFromTo(t, 'a'); } } function finishSkeletonAnimation() { if (mySwiper.previousIndex !== 1) { tl.progress(.99); } else { var t = tl.progress() * tl.duration(); tl.tweenFromTo(t, 'b'); } } }); I am using Swiper.js to change slides. Here are two short videos. The problem does not occurs at every time but random. Please see the videos. Here you can see one solid frame Here you can see that one elem still has got opacity: 1 It happens only if I go from orange to green background.

I am back I have dig up the forum and found a solution. It seems to be working and not adding extra element to the timeline. var fp = TweenMax.staggerTo(images, .1, { opacity: 1, onComplete: function () { this.target.style.opacity = 0; } }, .035); var sp = TweenMax.fromTo('.image-sequence', 3, {left: '60%'}, {left: '-30%'}); tl.add([fp, sp], 0); tl.add('a', tl.duration() * .2); tl.add('b', tl.duration() * .99); // window.addEventListener('') function animateSkeleton() { if(mySwiper.previousIndex === 0 || mySwiper.previousIndex !== 2) { if($('.image-sequence').hasClass('first-part-played')) { tl.progress(.2); } else { tl.tweenTo(tl.duration() * .2); $('.image-sequence').addClass('first-part-played') } } if(mySwiper.previousIndex === 2) { tl.tweenFromTo('b', 'a'); } } function finishSkeletonAnimation() { if(mySwiper.previousIndex !== 1) { tl.progress(.99); } else { tl.tweenFromTo('a', 'b'); } } This animation works on a slider. So if I go to a different slide than it continues the animation or reverse it back. And if I go to any slide where the skeleton is but the previous slide was not part of the animation than it just set the progress of the timeline to '.99' or '.2' . It depends on which slide you click on. It will be 1 but not yet now. thank you for the help guys

Thank you for the detailed answer. Yes it makes sense now. I try to make it. If can not then I will post what I have done and ask again for help.

Thanks Dipscom, I try to give more details var tl = new TimelineMax(); var rotateSkeleton; function animateSkeleton() { images.removeClass('played'); rotateSkeleton = tl.staggerTo(images, .1, { opacity: 1, onUpdate: function() {this.target.className = 'played'}, onComplete: function () { this.target.style.opacity = 0; this.target.classList.remove('played'); } }, .035, 0, removeElemWithNoFullOpacity); TweenMax.to('.image-sequence', 1, {left: '15%'}); rotateSkeleton.tweenTo(1); // setTimeout(function() { // removeElemWithNoFullOpacity(); // }, 1000) } function finishSkeletonAnimation() { if(mySwiper.previousIndex < mySwiper.realIndex) { TweenMax.fromTo('.image-sequence', 2, {left: '15%'}, {left: '-30%'}); rotateSkeleton.tweenFromTo(1, 4); } // setTimeout(function() { // removeElemWithNoFullOpacity(); // }, 2000) } I added the tl to 'rotateSkeleton' because I wanted to use the 'tweenTo' and 'tweenFromTo' methods to stop the animation at a certain time and continue when I call the 'finishSkeletonAnimation' function

Okay, I found a half working solution. I have to add the cb function at the end of the 'staggerTo' method. But because I use the tweenTo method it only works if the whole animation finishes. I need a one that fires when the tweenTo method finishes.

Hi, I am a having a bit problem to set a callback function. Here is what I am doing. function animateSkeleton() { rotateSkeleton = tl.staggerTo(images, .1, { opacity: 1, onComplete: function () { this.target.style.opacity = 0; this.target.classList.remove('played'); }, onStart: function() {this.target.className += 'played'} }, .035); TweenMax.to('.image-sequence', 1, {left: '15%'}); rotateSkeleton.tweenTo(1); setTimeout(function() { removeElemWithNoFullOpacity(); }, 1000) } It works fine once but when I call this 'animateSkeleton' function again then the setTimeout function is not working it animates backward (from 3 seconds to 1 second). I tried to add callback function to the onComplete method but it fires after each completed animation. I tried to add the onCompleteAll method but it did not work either. What I really need is a method that fires when the whole animation has just finished and my custom cb function can be invoked.

Thank you @mikel

Got it work. TweenMax.from('.st1', .5, {attr: {cy: 50}}).delay(.5); But I was not able to use fromTo TweenMax.fromTo('.st1', .5, { attr: {cy: 24.6}, cy: 40 }).delay(.5);

Hi, I would like to move the circle object on the y-axis up and down. How can I do that? My current code is not working. Thanks

Hi, I have got an issue. I have an svg line element to animate. Unfortunately it turns to a solid line on animation. I have read few topics to solve the problem but could not. This element has stroke, stroke-width and stroke-dasharray. Is the problem with the svg element? Thanks

Thank to coming back. Yes my issue is not related to GSAP. It is clear now. However if you can find a better title that can help someone else facing the same problem. So here it is what I have done to get it work. mySwiper.on('touchStart', function () { tr = mySwiper.getTranslate(); state.isMouseDown = false; finishAnimationOnClick('touch'); }); mySwiper.on('slideChange', function () { finishAnimationOnClick('click'); }); There are two different eventListeners what I needed to use because the slider works on touch and click (the parameters there only for testing purposes to see where the function was called from). Of course it is just a little thing (and annoying). I had to do other changes but that can be very project specific so I do not share those changes.(No changes to that code I shared the very first time). This way the animation is not breaking but finishes as expected. As I said it is not GSAP related issue but spent a huge amount of time to trace the error and it may save someone a bit of time.