Comments (8)
- I like "wait"
- Yeah, I like "time". Though I don't get your concern about "duration", cause it is the tween duration, right? But, I like both better than span.
from tram.
I'm proposing a feature here that allows the "step" duration to be different than the "transition" duration. Consider the following scenario:
- I want to animate a box from 0-500px, and have it take 2 seconds.
- Then I want to simulate an overshoot and have the box move to 520px.
- However, I don't want to wait until the box is done moving to 500 before starting the overshoot. Instead of 2 seconds, I want to start the overshoot at say, 1.8 seconds.
- I don't want the opacity duration to be modified at all during the sequence.
tram(elem)
.add('left 2s')
.add('opacity 2s')
.start({ opacity: 1, left: 500, span: '1.8s' })
.then({ left: 520 })
So I still want the step to run for 2 seconds (and the opacity would keep going), but I am intentionally cutting it short to achieve a certain effect. That's the reason I don't want to use time
here.
Any ideas?
from tram.
Alternatively I was considering something like this:
tram(elem)
.add('left 2s')
.add('opacity 2s')
.start({ opacity: 1, left: 500, skip: true },
.wait('1.8')
.then({ left: 520 })
"Skip" would skip to the next item in the queue, which is a wait for 1.8 seconds.
from tram.
Not sure if "skip" is the right word though, maybe async
?
from tram.
Just to clarify here, I think async
makes the most sense:
tram(elem)
.add('left 2s')
.start({ left: 500, async: true }) // this step does not wait to finish
.wait('1.8') // this wait is triggered immediately.
.then({ left: 520 }) // time to reach this step would be 1.8s instead of 2.
from tram.
Final spec for this feature:
tram(elem)
.add('left 2s')
.start({ left: 500, wait: '1s' }) // this step lasts 1 second instead of 2.
.then({ top: 100 })
.wait(500) // waits half a second between queue items.
.then(callback);
from tram.
@danro So the wait
in line 3 is overriding the 2s
in line 2?
from tram.
Nah, they're separate. Check out the example, and hopefully that will make more sense until I can document the wait
property. http://bkwld.github.io/tram/examples/wait-usage.html
from tram.
Related Issues (20)
- Bad selectors throw a fatal error HOT 2
- Support SVG dash offset
- Add failsafe for rAF bug in iOS Chrome HOT 1
- Getting an undefined on `wait()` HOT 3
- Make it possible to chain tram onto jquery HOT 2
- Allow set() to apply "auto" HOT 6
- Support chaining with wait() HOT 3
- GPU layering approach info? HOT 2
- Git rid of Makefile?
- jQuery Collections Ignore 'Then' HOT 1
- Warning: No active transition timer HOT 5
- Matrix transform support? HOT 8
- Call then() after something has had stop() called HOT 6
- Support for IE HOT 2
- The transform example did not work on Chrome Version 34.0.1847.137 m HOT 4
- Project still maintained? HOT 1
- Feature idea: specify time using number only HOT 2
- Support CSS filters
- Test `display: none` + set() + start()
- Fix unit tracking in transform properties
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tram.