jlengrand/Cquence
1
0
Fork 0
mirror of https://github.com/RamonGebben/Cquence.git synced 2026-03-10 08:51:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update readme

Browse Source
This commit is contained in:
Ramon Gebben
2015-01-16 09:47:29 +01:00
parent 9abe040f22
commit f2f1b13f2d
1 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
README.md
View File

@@ -27,38 +27,39 @@ sequence(
```javascript
var render = combine(
sequence(
sleep( 100 ),
linear('frame3', 10000, { left: -900 }, {left: 300 })
),
sequence(
easeOut('frame1', 2000, { left: -1000 }, { left: 120 }),
easeIn('frame6', 1000, { opacity: 0 }, { opacity: 1}),
easeIn('frame7', 1000, { opacity: 0 }, { opacity: 1}),
combine(
easeIn('frame6', 1500, { opacity: 1 }, { opacity: 0}),
easeIn('frame7', 1500, { opacity: 1 }, { opacity: 0}),
easeIn('frame8', 1500, { opacity: 0 }, { opacity: 1})
),
sleep(1000),
easeIn('frame8', 1000, { opacity: 1 }, { opacity: 0}),
easeIn('frame9', 1000, { opacity: 0, left: -300 }, { opacity: 1, left: 10}),
sleep(1500),
sequence(
combine(
easeIn('frame1', 1500, { left: 120 }, { left: -620 }),
easeOut('frame9', 2000, { opacity: 1, left: 10 }, { opacity: 0, left: -300 })
),
easeIn('frame2', 1000, { opacity: 0 },{ opacity: 0
sequence(
sleep( 100 ),
linear('frame3', 10000, { left: -900 }, {left: 300 })
),
sequence(
easeOut('frame1', 2000, { left: -1000 }, { left: 120 }),
easeIn('frame6', 1000, { opacity: 0 }, { opacity: 1}),
easeIn('frame7', 1000, { opacity: 0 }, { opacity: 1}),
combine(
easeIn('frame6', 1500, { opacity: 1 }, { opacity: 0}),
easeIn('frame7', 1500, { opacity: 1 }, { opacity: 0}),
easeIn('frame8', 1500, { opacity: 0 }, { opacity: 1})
),
sleep(1000),
easeIn('frame8', 1000, { opacity: 1 }, { opacity: 0}),
easeIn('frame9', 1000, { opacity: 0, left: -300 }, { opacity: 1, left: 40}),
sleep(1500),
sequence(
combine(
easeIn('frame1', 1500, { left: 120 }, { left: -620 }),
easeOut('frame9', 2000, { opacity: 1, left: 40 }, { opacity: 0, left: 360})
),
easeIn('frame2', 1000, { opacity: 0 }, { opacity: 1 }),
easeOut('frame10', 1000, { bottom: -260 }, { bottom: -210 })
)
}),
easeOut('frame10', 1000, { bottom: -260 }, { bottom: 0 })
),
sequence(
)
)
),
sequence(
)
);
// launch the animation
@@ -99,8 +100,7 @@ Then your HMTL should look something like this:
</div>
<div id='frame10' class ="frame">
<div id="cta">
<div id="button"></div>
<p>SWIPE TO CLICK</p>
<div id="button">Download</div>
</div>
</div>
</div>