How to use CSS and GSAP to implement loader animation of branch sprouting (source code attached)-CSS Tutorial-php.cn

How to use CSS and GSAP to implement loader animation of branch sprouting (source code attached)

不言

Release： 2018-09-13 16:20:33

Original

2053 people have browsed it

The content of this article is about how to use CSS and GSAP to realize the loader animation of branch sprouting (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

Effect preview

How to use CSS and GSAP to implement loader animation of branch sprouting (source code attached)

Source code download

https://github.com/comehope/front- end-daily-challenges

Code Interpretation

Define dom, the container contains 2 elements, branch represents branches, leaves represents leaves, and leaves have 6 child elements, representing 6 leaves:

<figure>
    <div></div>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</figure>

Copy after login

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

Copy after login

Define the container size and set the child elements to be horizontally centered:

.sapling {
    position: relative;
    width: 5em;
    height: 17.5em;
    font-size: 10px;
    display: flex;
    justify-content: center;
}

Copy after login

Draw the branches:

.branch {
    position: absolute;
    width: 0.2em;
    height: inherit;
    border-radius: 25%;
    background: burlywood;
}

Copy after login

Define the leaf container, set it so that the leaves are evenly distributed in the vertical direction and arranged from bottom to top:

.leaves {
    position: absolute;
    width: inherit;
    height: 15em;
    top: 1em;
    display: flex;
    flex-direction: column-reverse;
}

Copy after login

Set the size and background color of the leaves:

.leaves span {
    width: 2.5em;
    height: 2.5em;
    background-color: limegreen;
}

Copy after login

Set the left and right The respective styles of the leaves:

.leaves span:nth-child(odd) {
    border-bottom-left-radius: 3em;
    border-top-right-radius: 3em;
    transform-origin: right bottom;
    align-self: flex-start;
}

.leaves span:nth-child(even) {
    border-bottom-right-radius: 3em;
    border-top-left-radius: 3em;
    transform-origin: left bottom;
    align-self: flex-end;
}

Copy after login

At this point, the static effect drawing is completed, and then the animation script begins.
Introduce the GSAP library:

<script></script>

Copy after login

Declare a timeline object:

let animation = new TimelineMax();

Copy after login

Add the entrance animation effect of the branch, and set a label for this animationbranch:

animation.from('.branch', 4, {scaleY: 0, ease: Power1.easeOut}, 'branch');

Copy after login

Increase the entrance animation effect of leaves. There are 3 parameters 0.5. From left to right, they mean the animation duration, the interval duration of multiple leaf animations, and relative branch Delay time of label animation:

animation.from('.branch', 4, {scaleY: 0, ease: Power1.easeOut}, 'branch')
    .staggerFrom('.leaves span', 0.5, {scale: 0, ease: Power1.easeOut}, 0.5, 0.5, 'branch');

Copy after login

Increase the animation effect of leaves turning yellow:

animation.from('.branch', 4, {scaleY: 0, ease: Power1.easeOut}, 'branch')
    .staggerFrom('.leaves span', 0.5, {scale: 0, ease: Power1.easeOut}, 0.5, 0.5, 'branch')
    .to(['.branch', '.leaves span'], 3, {backgroundColor: 'yellow'});

Copy after login

Add fade-out effect:

animation.from('.branch', 4, {scaleY: 0, ease: Power1.easeOut}, 'branch')
    .staggerFrom('.leaves span', 0.5, {scale: 0, ease: Power1.easeOut}, 0.5, 0.5, 'branch')
    .to(['.branch', '.leaves span'], 3, {backgroundColor: 'yellow'})
    .to(['.branch', '.leaves span'], 1, {autoAlpha: 0});

Copy after login

Modify the statement timeline The code to make the animation play repeatedly:

let animation = new TimelineMax({repeat: -1, repeatDelay: 0.5});

Copy after login

Done!

Related recommendations:

How to use CSS and GSAP to implement continuous animation with multiple key frames (source code attached)

How to use Pure CSS code to draw a rotating Tai Chi diagram (with code)

The above is the detailed content of How to use CSS and GSAP to implement loader animation of branch sprouting (source code attached). For more information, please follow other related articles on the PHP Chinese website!