0

I want to popup my footer thumbnailed one by one with staggerFromTo() property.

enter image description here

Here is my HTML code.

<div class="footer">
    <img src="img/pic1.jpg" alt="">
    <img src="img/pic2.jpg" alt="">
    <img src="img/pic3.jpg" alt="">
    <img src="img/pic4.jpg" alt="">
</div>

Here is my js code:

const footer = document.querySelector(".footer");
const tl = new TimelineMax();
tl.staggerFromTo(footer,1.5,{y: "-100px"},{y: "0%",stagger:0.2})
JMP
  • 4,417
  • 17
  • 30
  • 41
Nazmina
  • 17
  • 1
  • 1
  • 3
  • You're using the old GSAP syntax. We at GreenSock highly recommend that you learn from the official GSAP resources like [the GSAP Getting Started article](https://greensock.com/get-started/) and [the stagger docs](https://greensock.com/docs/v3/Staggers) so you make sure to learn from the most up to date resources. – Zach Saucier Nov 13 '20 at 21:12

1 Answers1

1

You don't need this CSS. It's just to visualize the example!

I hope I've been helpful

gsap.fromTo('.footer > *', {
    y: 0,
    opacity: 0,
}, {
    duration: 1,
    stagger: 0.2,
    y: -100,
    opacity: 1,
})
.footer {
    position: absolute;
    bottom: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="footer">
    <img src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_013_by_54ka-165x165.jpg"
        alt="" width="100">
    <img src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_014_by_54ka-165x165.jpg"
        alt="" width="100">
    <img src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_015_by_54ka-165x165.jpg"
        alt="" width="100">
    <img src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_016_by_54ka-165x165.jpg"
        alt="" width="100">
</div>
54ka
  • 3,501
  • 2
  • 9
  • 24