search

jlmakes / scrollreveal

Animate elements as they scroll into view.
https://scrollrevealjs.org/
22.33k stars 2.26k forks source link

Can I start scroll animation when the specific portion of div is in viewport #501

Closed Umair45 closed 5 years ago

Umair45 commented 5 years ago

Hi,

First of all thanks for this library. I've one thing to ask.

I need to start animation only once a specific link is in the viewport in my banner, I've added my banner here. please open the following link and scroll down to see the banner area and animation:

http://kitndkaboodle.com/banner/

I've applied animations on the statistics and bottom link and its works fine as required. But I want only to start animation when link is visible otherwise not. for the reference please see the following screenshot i've added. Red line means I want to start animation when the link is visible.

section

Environment

I would be highly appreciate the help on this asap. As I need to fix this thing.

Best Regards, Umair

jlmakes commented 5 years ago

There isn’t first-class support separating visibility checks from animation triggers. You’ll have to devise a workaround to achieve this behavior with the current version of ScrollReveal (4.x).

Here’s an idea you can try. If you manually hide the statistics elements, you can reveal them in the afterReveal callback of a reveal() call on the link element. For example:

// pseudo code

otherElements.style.visibility = 'hidden'

reveal(link, {
  afterReveal: () => {
    reveal(otherElements)
  }
})

Something like this could work pretty well for a single reveal (without option.reset). But keep in mind that if JavaScript were disabled, or if ScrollReveal were unsupported, your elements would remain hidden and never be revealed. Your implementation would probably want to account for that.

P.S. ScrollReveal has an undocumented static method ScrollReveal.isSupported() that you can use to check if the current browser is supported.

Umair45 commented 5 years ago

@jlmakes Thanks a million for getting into my issue and reply. But my query was that this reveal animation should only happen when anchor above the red line is in the viewport. Right now, it starts animation once the starting point of my banner is in the viewport and its not taking any notice that wheather elements in the banner are in the viewport or not. Its just get started the animation. but I found solution for this from the Library options. Following link helped me.

https://scrollrevealjs.org/api/view-factor.html

I just added the "viewFactor: 1.0" attribute and my problem fixed. So, now animation not starts now until my statistics and link is in the viewport

Thanks,