Having more than one animation type

  • Resolved nick6352683

    (@nick6352683)


    3 years, 4 months ago

    Quick question:

    I followed your sample from the description (the rotation animation), and it works great. How can we set so that with different classes we can have different animations, like transform to move up, down, etc.. So some blocks will rotate, some will move up upon viewport entry, etc…

    Thanks, great idea btw…

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Jose

    (@giuse)

    Hi @nick6352683

    thank you for your thread.

    The easiest way is assigning an additional class to target a different effect

    For example, if you want to have a sliding effect on another element, you can assign to that element both the class cciv-el and e.g. sliding-effect.
    How you assign two classes depends on your builder if any. Usually, instead of “cciv-el”, you will write “cciv-el sliding-effect”.

    Then your CSS can be something like this:

    .cciv-el{

    transition: 2s transform ease

}
.cciv-no-script .cciv-el{

    transform:none !important

}

    (you should already have the CSS above for the rotation)

    .cciv-el.in-viewport.sliding-effect{

    transform:translateY(0);

}
.cciv-el.not-in-viewport.sliding-effect{

    transform:translateY(-300px);

}
    Thread Starter nick6352683

    (@nick6352683)

    Thanks, that makes sense.

    Plugin Author Jose

    (@giuse)

    You are welcome @nick6352683 !

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Having more than one animation type’ is closed to new replies.