Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Lacika1981

render issue tweenTo

Recommended Posts

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. 

Link to comment
Share on other sites

There is a lot to dissect here, unfortunately. 

 

Here is a Pen to get you started ... if you can link to some Creative Commons images for a small test case, that would be helpful.

 

Do you see the same result in the DOM if you were doing this to simple <div>s? (rather than images)

 

See the Pen mvgVgO by sgorneau (@sgorneau) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Thank you for your response,

 

Yes it does the same with empty divs.

 

I will create a pen  a bit later with empty divs

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Can you make a regular codepen instead of a project?

 

I took all the code and dependencies from the link you provided and made this codepen:

 

See the Pen KJYvwW by rhernando (@rhernando) on CodePen

 

But is not showing anything, since I don't know exactly what it should be doing. That will definitely help since the error you're reporting is not being thrown in the regular codepen, so that is a step in the right direction ;)

Link to comment
Share on other sites

Thank you @Rodrigo

 

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Hi,

 

I have made some changes and it works now.

Here is the link: 

See the Pen xMeLWB by Lacika1981 (@Lacika1981) on CodePen

 

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.

 

 

image.png

Link to comment
Share on other sites

i Don't really understand what I'm supposed to be seeing in the codepen and I can't dissect all that code, however the following throws some big red flags:

 

   function changeImage() {
            console.log('changeImage')
            setTimeout(function () {
                for (var i = 0, l = images.length; i < l; i++) {
                    if (images.style.opacity > 0 && images.style.opacity < .9) {
                        images.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, { x: '60%' }, { x: '-30%' });
        tl.add([fp, sp], 0);
        tl.add(['a', changeImage], tl.duration() * .2);
        tl.add(['b', changeImage], tl.duration() * .99);
 

 

It appears you want to call the changeImage function at a precise time in the timeline, but then you are using setTimeout to change the opacity.

setTimeout is not very accurate and is not at all synchronized with gsap.

 

Is there somewhere you have gsap setting the opacity and it is failing?

gsap has no control over functions or tasks that are called to execute outside of its realm.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

In that case you could try forcing he images elements to a opacity of 0 using the config object available in the .tween methods of TimelineMax. The sweet part of it is that GSAP has a killer overwrite manager that will detect any other lingering GSAP instance that affects the images, kill them and send them to garbage collection.

 

You could try something like this:

 

tl.tweenFromTo(t, "b", {
  onStart: function() {
    TweenMax.to(images, 0.1, {opacity: 0});
  }
});

 

That will tween the opacity to 0 very quickly on all the images when the timeline playhead starts moving to the "b" label.

 

Happy Tweening!!

  • Like 1
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×