GithubHelp home page GithubHelp logo

Callback function about scrollme HOT 3 OPEN

nckprsn avatar nckprsn commented on June 2, 2024
Callback function

from scrollme.

Comments (3)

nckprsn avatar nckprsn commented on June 2, 2024

Adding classes before/during/after the span of the animation sounds most feasible - I'll post back here when I've had a chance to look into it properly.

from scrollme.

nckprsn avatar nckprsn commented on June 2, 2024

Re your email, if you just want to change an image once an animation reaches its end point then you could do this with another animateme element placed over the existing one that fades in as soon as the other animation ends.

from scrollme.

camoix avatar camoix commented on June 2, 2024

Hi Nick,
I've been playing with your code and finally I made a modification that it works with the 2 options, adding a class and play a function when the animation is done.
I created 2 new tags:

  • "data-classCallBack" for adding a class when the animations ends and remove it when the animation restarts (scrollup)
  • "data-callBack" for play a function

you can see here:
http://digitalpoint.es/test/scrollme-master/demo3.htm

It works, but I'm not happy at all with the method that I use to detect the end of an animation. This method looks for the css of each item and when it doesnt have any transformation or grade of opacity determine that the animation has ended and do the stuff. Not good enought but it works for the demo.

I think that the best way to detec the end of the animation is detect if the item position is between the data-from and data-to:
if position item > data-from = not started the animation
if position item < data-from & > data-to = started the animation
if position item < data-to = finish the animation

but I dont know how to do that.
What do you think about?

Regards,
Xesc

from scrollme.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.