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.