当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - GSAP animation start when item is active with owl-carosusel2.0

问题描述:

How can I start the gsap animation when the owl-item is active?

Here is the jsfiddle https://jsfiddle.net/shokwave/heqacza5/5/

HTML

<div class="owl-carousel">

<div class="item">

<div class="slider-info">

<span class="label">label</span>

<h4>1. Title</h4>

<div class="divide"></div>

<p>Lorem ipsum dolor sit amet, </p>

<button class="button">button</button>

</div><!-- slider-info -->

<div class="bottle1">bottle1</div>

</div>

<div class="item">

<div class="slider-info">

<span class="label">label</span>

<h4>2. Title</h4>

<div class="divide"></div>

<p>Lorem ipsum dolor sit ame do eiusmod

tempor incididunt ut labore et </p>

<button class="button">button</button>

</div><!-- slider-info -->

<div class="bottle1">bottle1</div>

</div>

<div class="item">

<div class="slider-info">

<span class="label">label</span>

<h4>3. Title</h4>

<div class="divide"></div>

<p>Lorem ipsum dolor sit amet, c </p>

<button class="button">button</button>

</div><!-- slider-info -->

<div class="bottle1">bottle1</div>

</div>

</div>

JS

$('.owl-carousel').owlCarousel({

loop:true,

items:1,

nav:true

});

It's my first time to work with gsap! I want to amnimate all sections.

分享给朋友:
您可能感兴趣的文章:
随机阅读: