Jump to content
GreenSock

AlwaysDigital

Input about how to structure animation

By AlwaysDigital, in GSAP. Views: 775

Moderator Tag

Recommended Posts

Posted

Hello,

 

I have an animation that requires a mix of scrubbed animations and non-scrubbed animations.

The first "scene" of my animation should be a fadein of several elements with a "scroll to animate" text that pulses.

At this moment I don't want any scrubbing. But if the user starts scrolling down I want a scrub only between two scenes. Let's say that on the first scene all the elements have a fadein effect then the user starts scrolling down and when he scrolls down those elements have their y coordinate changed as a transition to the next scene. In this case I want the scrub to only allow jumping between scenes. 

 

I've found snapTo(), using .add("scene") to trigger many animations at the same time. I've also seen the concept of master timeline. Does this mean that the master timeline should have a scrub option to true and the other not? I'm a bit confused on how to structure this.

 

Many thanks for the feedbacks!

Link to comment
Share on other sites
  • Author
Posted

I haven't even start. My question is more general, not really related to this animation. Basically a first intro scene, no scrubbing there. Then scrubbing but the scrub should only "triggers" the next scene. If an element goes from opacity 1 to 0 inside of a scene, I don't want the scroll the animate each steps from 1 to 0. It should just triggers the animation "1 to 0". My question is more a conceptual question about the best way to structure that kind of animation.

Link to comment
Share on other sites
Posted

Hello @AlwaysDigital, thanks for being part of Club GreenSock. ☺️

A common technique to mix up scrubbed and non scrubbed animations is to fire off animations in callbacks on the scrubbed timeline.
 


But beyond that advice, I'm afraid I'm finding this quite hard to picture - could you maybe give it a go and then pop a minimal demo here for feedback?

Chat soon!

  • Like 2
Link to comment
Share on other sites
  • Author
Posted

Thanks for your support. I'll make a version, post it and explain what I want

  • Like 1
Link to comment
Share on other sites
  • Author
Posted

We changed the animation and I was able to go further. However I've noticed a weird behavior and I would like to have your lights on this one.

 

In a part of timeline I want to reveal items from the center then place them at a defined position. I've noticed that there are 2 translate values et the last one as a negative pixel value. I don't know where it comes from. 

this is the timeline 

  let primaryTl = gsap.timeline({
            scrollTrigger: {
                trigger: "main",
                pin:".frame-type-wpwa_ce_agency_history",
                start: "top top",
                end: "+=20000px",
                pinSpacing: true,
                // once: true,
                scrub:true,
                // snap: {
                //     snapTo: "labels", // snap to the closest label in the timeline
                //     duration: {min: 0.2, max: 3}, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
                //     delay: 0.2, // wait 0.2 seconds from the last scroll event before doing the snapping
                //     ease: "power1.inOut" // the ease of the snap animation ("power3" by default)
                // }
                onLeave: function(self) {
                    self.scroll(self.start);	// <-- sets position to start of ScrollTrigger
                    self.disable()
                    self.animation.progress(1)
                }
            }
        })

        primaryTl.add("scene2");
        primaryTl.to(".frame-type-wpwa_ce_agency_history #star", {opacity:0, delay: 1, duration: 2}, 'scene2');
        primaryTl.to(".frame-type-wpwa_ce_agency_history #code1", {opacity:0, delay: 1, duration: 2}, 'scene2');
        primaryTl.to(".frame-type-wpwa_ce_agency_history #code2", {opacity:0, delay: 1, duration: 2}, 'scene2');
        primaryTl.to(".frame-type-wpwa_ce_agency_history .pulse", {opacity:0, animation:"none", delay: 1, duration: 2}, 'scene2');
        primaryTl.to(".frame-type-wpwa_ce_agency_history #parallax-headline-first", {opacity:1, delay: .5, duration: .5});
        primaryTl.to(".frame-type-wpwa_ce_agency_history #parallax-headline-first span", {
            duration: 2,
            x: 0,
            ease: "ease-out",
        });
        primaryTl.set({}, {}, "+=1")

        primaryTl.add("scene3");
        primaryTl.to(".frame-type-wpwa_ce_agency_history #parallax-headline-first", {opacity:0, delay: 1, duration: 2});

        primaryTl.add("scene4");
        primaryTl.set(".frame-type-wpwa_ce_agency_history #star", {width:500});
        // primaryTl.to(".frame-type-wpwa_ce_agency_history #first-website, .frame-type-wpwa_ce_agency_history #wpwaishere, .frame-type-wpwa_ce_agency_history #team, .frame-type-wpwa_ce_agency_history #services, .frame-type-wpwa_ce_agency_history #star, .frame-type-wpwa_ce_agency_history #code1, .frame-type-wpwa_ce_agency_history #code2", {opacity:.3, delay: 1, duration: 2,});

        // primaryTl.to(".frame-type-wpwa_ce_agency_history #parallax-headline-first", {opacity:0, delay: 1, duration: 1});
        primaryTl.to(".frame-type-wpwa_ce_agency_history #first-website", {opacity:1, scale:1.5, delay: 1, duration: 2});
        primaryTl.set({}, {}, "+=1")
        // primaryTl.to(".frame-type-wpwa_ce_agency_history #first-website", {opacity:0, delay: 1, duration: 1, width:"0"});
        // primaryTl.to(".frame-type-wpwa_ce_agency_history #first-website", { delay: 1,xPercent:-50, yPercent:-45, left:"50%", top:"45%", width:500,zIndex:2,duration: 1});
        primaryTl.set({}, {}, "+=2")
        primaryTl.to(".frame-type-wpwa_ce_agency_history #first-website", {delay: 1,xPercent:0, yPercent:0, left:"250px", top:"250px", scale:1, width:250,zIndex:2,opacity:.3,duration: 1});
        primaryTl.set({}, {}, "+=1")
        primaryTl.to(".frame-type-wpwa_ce_agency_history #wpwaishere", { opacity:1, scale:1.5, delay: 1, duration: 2});
        primaryTl.set({}, {}, "+=2")
        primaryTl.to(".frame-type-wpwa_ce_agency_history #wpwaishere", {delay: 1,xPercent:0, yPercent:0, bottom:"5%", left:"15%",scale:1, width:300,zIndex:2,opacity:.3,duration: 1});
        primaryTl.set({}, {}, "+=1")
        primaryTl.to(".frame-type-wpwa_ce_agency_history #team", { opacity:1, scale:1.5, delay: 1, duration: 2});
        primaryTl.set({}, {}, "+=2")
        primaryTl.to(".frame-type-wpwa_ce_agency_history #team", {delay: 1,xPercent:0, yPercent:0, right:"10%",bottom:"5%", width:270,zIndex:2,opacity:.3,scale:1, duration: 1});
        primaryTl.set({}, {}, "+=1")
        primaryTl.to(".frame-type-wpwa_ce_agency_history #services", { opacity:1, scale:1.5, delay: 1, duration: 2});
        primaryTl.set({}, {}, "+=2")
        primaryTl.to(".frame-type-wpwa_ce_agency_history #services", {delay: 1,xPercent:0, yPercent:0, right:"5%",top:"5%", width:250,zIndex:2,opacity:.3,scale:1, duration: 1});
        primaryTl.set({}, {}, "+=1")
        primaryTl.to(".frame-type-wpwa_ce_agency_history #first-website, .frame-type-wpwa_ce_agency_history #wpwaishere, .frame-type-wpwa_ce_agency_history #team, .frame-type-wpwa_ce_agency_history #services, .frame-type-wpwa_ce_agency_history #star, .frame-type-wpwa_ce_agency_history #code1, .frame-type-wpwa_ce_agency_history #code2", {opacity:0, delay: 1, duration: 2,});
        primaryTl.to(".frame-type-wpwa_ce_agency_history #parallax-headline", {opacity:1});
        primaryTl.to(".frame-type-wpwa_ce_agency_history #parallax-headline span", {
            duration: 2,
            delay: 1,
            x: 0,
            ease: "ease-out",
        });
        primaryTl.set({}, {}, "+=3")

 

this is the CSS 

.frame-type-wpwa_ce_agency_history{
   position: relative;
}

.frame-type-wpwa_ce_agency_history #parallax-headline,
.frame-type-wpwa_ce_agency_history #parallax-headline-first{
    width: 100%;
    text-align: center;
    padding: 0 15px;
}

.frame-type-wpwa_ce_agency_history #parallax-headline{
    top: 20%;
}

.frame-type-wpwa_ce_agency_history #parallax-headline-first{
    top: 25%;
}

.js .frame-type-wpwa_ce_agency_history .inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    height: calc(100vh - 80px);
    overflow: hidden;
}

@supports((text-stroke: 2px white) or (-webkit-text-stroke: 2px white)) {
    .frame-type-wpwa_ce_agency_history #parallax-headline-first span,
    .frame-type-wpwa_ce_agency_history #parallax-headline span {
        color: transparent;
        -webkit-text-stroke: 2px #fff;
        text-stroke: 2px #fff;
        text-shadow: none;
    }
    .frame-type-wpwa_ce_agency_history #parallax-headline span:nth-of-type(2),
    .frame-type-wpwa_ce_agency_history #parallax-headline-first span:first-of-type{
        -webkit-text-stroke: 2px #fff;
        color: #fff;
        text-stroke: 2px #fff;
        text-shadow: none;
    }
}

.js .frame-type-wpwa_ce_agency_history #parallax-headline span,
.js .frame-type-wpwa_ce_agency_history #parallax-headline-first span{
    text-transform: uppercase;
    display: block;
    line-height: 1.1em;
    font-size: 40px;
    width: 100%;
}

.js .frame-type-wpwa_ce_agency_history #parallax-headline span:nth-of-type(odd),
.js .frame-type-wpwa_ce_agency_history #parallax-headline-first span:nth-of-type(odd){
    transform: translateX(200%);
}

.js .frame-type-wpwa_ce_agency_history #parallax-headline span:nth-of-type(even),
.js .frame-type-wpwa_ce_agency_history #parallax-headline-first span:nth-of-type(even){
    transform: translateX(-200%);
}



.js .frame-type-wpwa_ce_agency_history{
    display: block;
}

.js .frame-type-wpwa_ce_agency_history #code1,
.js .frame-type-wpwa_ce_agency_history #code2,
.js .frame-type-wpwa_ce_agency_history #star,
.js .frame-type-wpwa_ce_agency_history #disquette,
.js .frame-type-wpwa_ce_agency_history #first-website,
.js .frame-type-wpwa_ce_agency_history #wpwaishere,
.js .frame-type-wpwa_ce_agency_history #team,
.js .frame-type-wpwa_ce_agency_history #services,
.js .frame-type-wpwa_ce_agency_history #parallax-headline,
.js .frame-type-wpwa_ce_agency_history #parallax-headline-first,
.js .frame-type-wpwa_ce_agency_history .pulse{
    position: absolute;
    display: block;
}

/*.js .frame-type-wpwa_ce_agency_history #code1,*/
/*.js .frame-type-wpwa_ce_agency_history #code2,*/
/*.js .frame-type-wpwa_ce_agency_history #star,*/
.js .frame-type-wpwa_ce_agency_history #disquette,
.js .frame-type-wpwa_ce_agency_history #first-website,
.js .frame-type-wpwa_ce_agency_history #wpwaishere,
.js .frame-type-wpwa_ce_agency_history #team,
.js .frame-type-wpwa_ce_agency_history #services,
.js .frame-type-wpwa_ce_agency_history #parallax-headline,
.js .frame-type-wpwa_ce_agency_history #parallax-headline-first,
.js .frame-type-wpwa_ce_agency_history .pulse
{
    opacity: 0;
}

.js .frame-type-wpwa_ce_agency_history #code1,
.js .frame-type-wpwa_ce_agency_history #code2,
.js .frame-type-wpwa_ce_agency_history #star{
    opacity: 1;
}




    .frame-type-wpwa_ce_agency_history #code1 {
        right: 15px;
        top: 0;
        width: 70%;
        max-width: 250px;
    }

    .frame-type-wpwa_ce_agency_history #code2 {
        left: 15px;
        bottom: 5%;
    }

    .frame-type-wpwa_ce_agency_history  #star {
        top: 10%;
        left: 50%;
        transform: translate(-50%, -10%);
        height: auto;
        width: 90%;
    }

    .frame-type-wpwa_ce_agency_history .pulse {
        bottom: 25%;
        left: 50%;
        transform: translate(-50%, -10%) scale(1);
        width: 90%;
        font-size: 25px;
        text-align:center;

        /*box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);*/
        animation: pulse-white 1.8s infinite;
    }

    .frame-type-wpwa_ce_agency_history  #disquette {
        top: 20%;
        left: 50%;
        width: auto;
        height: 70%;
        z-index: 2;
    }

    .frame-type-wpwa_ce_agency_history #first-website {
        top: 40%;
        left: 50%;
        transform: translate(-50%, -40%);
        height: auto;
        width: 90%;
    }

    .frame-type-wpwa_ce_agency_history #wpwaishere {
        top: 40%;
        left: 50%;
        transform: translate(-50%, -40%);
        width: 60%;
    }

    .frame-type-wpwa_ce_agency_history #team {
        top: 40%;
        left: 50%;
        transform: translate(-50%, -40%);
        height: auto;
        width: 90%;
    }

    .frame-type-wpwa_ce_agency_history #services {
        top: 30%;
        left: 50%;
        transform: translate(-50%, -30%);
        height: 60%;
        width: auto;
    }



@media (min-width: 640px), (orientation: landscape) {

    .frame-type-wpwa_ce_agency_history #star {
        width: auto;
        height: 90%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .frame-type-wpwa_ce_agency_history #parallax-headline {
        top: 50%;
        left: 50%;
        margin: 0;
        transform: translate(-50%, -50%);
    }

    .frame-type-wpwa_ce_agency_history #disquette,
    .frame-type-wpwa_ce_agency_history #line-disquette {
        width: auto;
        height: 60%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .frame-type-wpwa_ce_agency_history #code1 {
        width: 30%;
        right: 15px;
    }

    .frame-type-wpwa_ce_agency_history #code2 {
        width: 30%;
        bottom: 0;
        left: 15px;
    }

    .frame-type-wpwa_ce_agency_history #first-website,
    .frame-type-wpwa_ce_agency_history #wpwaishere,
    .frame-type-wpwa_ce_agency_history #team,
    .frame-type-wpwa_ce_agency_history #services {
        top: 50%;
        left: 50%;
        width: auto;
        transform: translate(-50%, -50%);
        height: 70%;
    }
}



@media (min-width: 768px) and (orientation: portrait){

    .frame-type-wpwa_ce_agency_history .inner {
        height: calc(100vh - 120px);
    }

    .frame-type-wpwa_ce_agency_history #code1 {
        right: 15px;
        top: 0;
        width: 70%;
        max-width: 400px;
    }

    .js .frame-type-wpwa_ce_agency_history #parallax-headline span,
    .js .frame-type-wpwa_ce_agency_history #parallax-headline-first span{
        font-size: 80px;
    }

    .frame-type-wpwa_ce_agency_history #code2 {
        left: 15px;
        bottom: 5%;
    }

    .frame-type-wpwa_ce_agency_history #star {
        top: 5%;
        left: 50%;
        transform: translate(-50%, -40%);
        height: auto;
        width: 80%;
    }

    .frame-type-wpwa_ce_agency_history #disquette {
        top: 40%;
        left: 50%;
        transform: translate(-50%, -40%);
        height: auto;
        width: 50%;
        z-index: 2;
    }

    .frame-type-wpwa_ce_agency_history #first-website {
        top: 40%;
        left: 50%;
        transform: translate(-50%, -40%);
        height: auto;
        width: 50%;
    }

    .frame-type-wpwa_ce_agency_history #wpwaishere {
        top: 40%;
        left: 50%;
        transform: translate(-50%, -40%);
        width: 50%;
        height: auto;
    }

    .frame-type-wpwa_ce_agency_history #team {
        top: 40%;
        left: 50%;
        transform: translate(-50%, -40%);
        height: auto;
        width: 60%;
    }

    .frame-type-wpwa_ce_agency_history #services {
        top: 30%;
        left: 50%;
        transform: translate(-50%, -30%);
        height: auto;
        width: 50%;
    }

}

@media (min-width: 1024px) {

    .js .frame-type-wpwa_ce_agency_history #parallax-headline span,
    .js .frame-type-wpwa_ce_agency_history #parallax-headline-first span{
        font-size: 80px;
    }

    .js .frame-type-wpwa_ce_agency_history .inner {
        height: calc(100vh - 120px);
    }

    .frame-type-wpwa_ce_agency_history .pulse{
        bottom: 5%;
    }

    .frame-type-wpwa_ce_agency_history #code1 {
        width: 30%;
        top: 5%;
        right: 25%;
        bottom: auto;
        z-index: 3;
    }

    .frame-type-wpwa_ce_agency_history #code2 {
        width: 300px;
        top: auto;
        bottom: 40%;
    }

    .frame-type-wpwa_ce_agency_history #star {

        height: auto;
        width: 600px;

        /*top: 45%;*/
        /*left: 50%;*/
        /*transform: translate(-50%, -45%);*/
    }

    .frame-type-wpwa_ce_agency_history #first-website{
        top: 45%;
        left: 50%;
        transform: translate(-50%, -45%);
    }

    .frame-type-wpwa_ce_agency_history #services{
        top: 45%;
        left: auto;
        right: 50%;
        transform: translate(50%, -45%);
    }

    .frame-type-wpwa_ce_agency_history #wpwaishere{
        bottom: 65%;
        top: auto;
        left: 50%;
        transform: translate(-50%, 65%);
    }

    .frame-type-wpwa_ce_agency_history #team{
        bottom: 65%;
        right: 50%;
        top:auto;
        left: auto;
        transform: translate(50%, 65%);
    }

    /*.frame-type-wpwa_ce_agency_history #services,*/
    /*.frame-type-wpwa_ce_agency_history #first-website,*/
    /*.frame-type-wpwa_ce_agency_history #wpwaishere,*/
    /*.frame-type-wpwa_ce_agency_history #team{*/
    /*    top: 45%;*/
    /*    left: 50%;*/
    /*    transform: translate(-50%, -45%) scale(0);*/
    /*}*/

    /*.frame-type-wpwa_ce_agency_history #services,*/
    /*.frame-type-wpwa_ce_agency_history #first-website,*/
    /*.frame-type-wpwa_ce_agency_history #wpwaishere,*/
    /*.frame-type-wpwa_ce_agency_history #team{*/
    /*    bottom: 65%;*/
    /*    left: 50%;*/
    /*    transform: translate(-50%, -45%) scale(0);*/
    /*}*/



    .frame-type-wpwa_ce_agency_history #disquette {
        height: 60%;
        width: auto;
    }


    .frame-type-wpwa_ce_agency_history #services {
        /*right: 5%;*/
        /*left: auto;*/
        width: 160px;
        height: auto;
        /*top: 5%;*/
        /*transform: translate(0);*/
        /*z-index: 5;*/
    }

    .frame-type-wpwa_ce_agency_history #first-website {
        /*top: 5%;*/
        /*left: 5%;*/
        height: auto;
        width: 250px;
        /*transform: translate(0, 0);*/
    }

    .frame-type-wpwa_ce_agency_history #wpwaishere {
        /*bottom: 5%;*/
        /*left: 15%;*/
        /*top:auto;*/
        height: auto;
        /*right: auto;*/
        width: 200px;
        /*transform: translate(0, 0);*/
    }

    .frame-type-wpwa_ce_agency_history #team {
        /*right: 10%;*/
        /*left: auto;*/
        /*bottom: 5%;*/
        height: auto;
        /*top: auto;*/
        width: 250px;
        /*transform: translate(0, 0);*/
    }

}


@media (min-width: 1400px) {

    .js .frame-type-wpwa_ce_agency_history #parallax-headline span,
    .js .frame-type-wpwa_ce_agency_history #parallax-headline-first span{
        font-size: 90px;
    }


    .frame-type-wpwa_ce_agency_history #code1 {
        width: 40%;
        /*top: 5%;*/
        /*right: 30%;*/
        bottom: auto;
        z-index: 3;
    }

    .frame-type-wpwa_ce_agency_history #code2 {
        width:400px;
        /*top: auto;*/
        /*bottom: 40%;*/
    }

    .frame-type-wpwa_ce_agency_history #star {

        height: auto;
        width: 600px;

        /*top: 45%;*/
        /*left: 50%;*/
        /*transform: translate(-50%, -45%);*/
    }

    .frame-type-wpwa_ce_agency_history #disquette {
        height: 60%;
        width: auto;
    }


    .frame-type-wpwa_ce_agency_history #services {
        /*right: 5%;*/
        /*left: auto;*/
        width: 200px;
        height: auto;
        /*top: 5%;*/
        /*transform: translate(0);*/
        z-index: 5;
    }

    .frame-type-wpwa_ce_agency_history #first-website {
        /*top: 5%;*/
        /*left: 5%;*/
        height: auto;
        width: 300px;
        /*transform: translate(0, 0);*/
    }

    .frame-type-wpwa_ce_agency_history #wpwaishere {
        /*bottom: 5%;*/
        /*left: 15%;*/
        /*top:auto;*/
        height: auto;
        /*right: auto;*/
        width: 250px;
        /*transform: translate(0, 0);*/
    }

    .frame-type-wpwa_ce_agency_history #team {
        /*right: 10%;*/
        /*left: auto;*/
        /*bottom: 5%;*/
        height: auto;
        /*top: auto;*/
        width: 270px;
        /*transform: translate(0, 0);*/
    }

}


@media (min-width: 1800px) {
    .js .frame-type-wpwa_ce_agency_history #parallax-headline span,
    .js .frame-type-wpwa_ce_agency_history #parallax-headline-first span{
        font-size: 120px;
    }


    .frame-type-wpwa_ce_agency_history #star {

        height: auto;
        width: 700px;

        /*top: 45%;*/
        /*left: 50%;*/
        /*transform: translate(-50%, -45%);*/
    }

    .frame-type-wpwa_ce_agency_history .pulse {
        bottom: 20%;
    }


}


@keyframes pulse-white {
    0% {
        transform: translate(-50%, -10%) scale(0.95);
        opacity: 0;
    }

    70% {
        transform: translate(-50%, -10%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -10%) scale(0.95);
        opacity: 0;
    }
}

As you can see the elements are placed at the beginning using  

 top: 45%;
 left: 50%;
 transform: translate(-50%, -45%);

From that Gast counts a negative pixel value. 

 

If I set this in JS instead of CSS (initial position) 

primaryTl.to(".frame-type-wpwa_ce_agency_history #first-website, .frame-type-wpwa_ce_agency_history #wpwaishere", {xPercent:-50, yPercent:-45, left:"50%", top:"45%"});

I still get this at the end in the browser. Notice the negative value and the presence of 2 translate 

top: 45%;
left: 50%;
transform: translate(-50%, -45%) translate(0px, -99.2667px);
z-index: auto;

 

 

Do you have any clue what I am missing?

I've made a video because I can't host images on codepen. 

Many thanks. 

Link to comment
Share on other sites
Posted

If you need help, please provide a minimal demo. All that should be in a minimal demo is enough code to clearly demonstrate the issue. There is no need for all that CSS and timeline code. Nor do we need to see images. Just use colored boxes. Thanks!

 

  • Like 1
Link to comment
Share on other sites
Posted

Thanks for demo!

 

There's a browser limitation when you use percentage based transforms in your CSS. Everything is reported to GSAP as matrix with px values, so it doesn't know you are using percentages, so it's best to always set your transforms with GSAP before animating.

 

Is this what you are expecting?

 

See the Pen NWwwzJj by GreenSock (@GreenSock) on CodePen

 

  • Like 2
Link to comment
Share on other sites
  • Author
Posted

Yes thanks for your feedback. In case I want to have the CSS as fallback for non-js users and only animate when js is loaded, I will have a problem if define everything in JS.

 

But I get the issue :) Thanks!

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account