Animate Image or text everytime on scroll

  • skyhightech

    (@skyhightech)


    3 years, 7 months ago

    I am currently working on a website one page scroll navigation as homepage.

    There are total 5 sections. each section has a heading and those headings have animations

    but the animation gets triggered one time only and that’s when the user scroll to each section for the 1st time.

    I want the animation to trigger every time the user scroll to that section.

    similar to https://staypositiveadv.com/ (Same website but it’s currently live using a paid plugin)

    I don’t want to use any plugin. I want to know how I can achieve this by coding.
    I am still learning and need to polish my skills

    Thanks

    • This topic was modified 3 years, 7 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • dhruvkb

    (@dhruvkb)

    3 years, 7 months ago

    This can be accomplished using By using JavaScript, specifically the Intersection Observer API. The observer will receive events everytime the element appears on the screen and you can use it to fire the animations.

    Since you are using Elementor, their support forums might be a good place to ask for idiomatic solutions to achieve that effect.

    Thread Starter skyhightech

    (@skyhightech)

    3 years, 7 months ago

    @dhruvkb Yeah I am also seeking help from there as well..

    But I am looking for a simple css coding I don’t want to get into Java and HTML ..because then might as well install a plugin.

    dhruvkb

    (@dhruvkb)

    3 years, 7 months ago

    @skyhightech a pure CSS solution doesn’t exist for this. You will need to use JavaScript to trigger the animation by observing the element’s intersection with the viewport.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Animate Image or text everytime on scroll’ is closed to new replies.