Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Feb 26, 2020. It is now read-only.

Commit 19315ea

Browse files
committed
work in progress
1 parent 6f65308 commit 19315ea

File tree

1 file changed

+161
-47
lines changed

1 file changed

+161
-47
lines changed

‎src/helpers/intro.js

Lines changed: 161 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import 'pixi.js'
2-
import { TweenMax, Power3, RoughEase, Linear } from 'gsap'
2+
import { TweenMax, Power3, Power4,RoughEase, Linear } from 'gsap'
33
/* globals PIXI */
44

55
// Create class - needed something that was effected by vue
66
export default class VueBuildIntro {
77
constructor () {
88
this.height = window.innerHeight
99
this.width = window.innerWidth
10+
this.primaryColor = parseInt('41B883', 16) // #41B883
11+
this.secondaryColor = parseInt('35495E', 16) // #35495E
1012
this.canvas = document.getElementById('canvasIntro')
1113
this.app = new PIXI.Application(this.height, this.width, {
1214
antialias: true,
@@ -18,6 +20,10 @@ export default class VueBuildIntro {
1820
window.addEventListener('resize', this.resize())
1921
this.canvas.appendChild(this.app.view)
2022
this.all = new PIXI.Container() // Container for all v's
23+
this.all.positionX = this.width / 2
24+
this.all.positionY = this.height / 2
25+
this.all.positionYStart = -200
26+
this.all.positionYEnd = 200
2127

2228
// Make a container to hold all v's
2329
this.app.stage.addChild(this.all) // Add to state
@@ -30,14 +36,10 @@ export default class VueBuildIntro {
3036
// Center and scale
3137
this.allCenter()
3238

33-
// Animate minis
34-
this.animateMinis()
35-
36-
// Animate
37-
this.spreadOut(0.5, 1)
38-
.then(() => {
39+
// Start animations
40+
setTimeout(() => {
3941
this.animate()
40-
})
42+
},500)
4143
}
4244

4345
// When window resizes resize renderer
@@ -53,11 +55,11 @@ export default class VueBuildIntro {
5355
this.all.pivot.y = this.height / 2
5456

5557
// Set x and y
56-
this.all.x = this.width/2
57-
this.all.y = this.height/2
58+
this.all.x = this.all.positionX
59+
this.all.y = this.all.positionYStart
5860

5961
// Scale to size - must be dont after setting pivot
60-
this.all.scale.set(0.3)
62+
this.all.scale.set(0.4)
6163
}
6264

6365
// Create V container and center
@@ -69,14 +71,16 @@ export default class VueBuildIntro {
6971
v.addChild(vBottom)
7072

7173
// Set pivot and position
72-
v.pivot.x = info.pivotX ? info.pivotX : v.width / 2
73-
v.pivot.y = info.pivotY ? info.pivotY : -115
7474
v.x += info.x ? info.x : this.width / 2
7575
v.y += info.y ? info.y : this.height / 2
76+
if (info.pivotX && info.pivotX === 'center') { info.pivotX = v.width / 2 }
77+
if (info.pivotY && info.pivotY === 'center') { info.pivotY = v.height / 2 }
78+
v.pivot.x = info.pivotX ? info.pivotX : v.width / 2
79+
v.pivot.y = info.pivotY ? info.pivotY : -115
7680

77-
if (info.scale) {
78-
v.scale.set(info.scale)
79-
}
81+
if (info.scale) {v.scale.set(info.scale)}
82+
if(info.rotation){v.rotation=info.rotation}
83+
if(info.alpha){v.alpha=info.alpha}
8084

8185
return v
8286
}
@@ -85,7 +89,7 @@ export default class VueBuildIntro {
8589
vTop () {
8690
var v = new PIXI.Graphics()
8791

88-
v.beginFill(parseInt('35495E',16))
92+
v.beginFill(this.secondaryColor)
8993
v.moveTo(80, 0)
9094
v.lineTo(200, 205)
9195
v.lineTo(320, 0)
@@ -102,7 +106,7 @@ export default class VueBuildIntro {
102106
vBottom () {
103107
var v = new PIXI.Graphics()
104108

105-
v.beginFill(parseInt('41B883',16))
109+
v.beginFill(this.primaryColor)
106110
v.moveTo(0, 0)
107111
v.lineTo(200, 345)
108112
v.lineTo(400, 0)
@@ -115,43 +119,150 @@ export default class VueBuildIntro {
115119
return v
116120
}
117121

118-
animateMinis () {
122+
// Animate is responsible for calling animations in order and timing
123+
animate () {
124+
// Zoom v in
125+
this.zoomIn()
126+
.then(() => {
127+
this.shakeAll(0.3, 2)
128+
this.minisIn() // Send out the minis
129+
130+
return this.spreadOut(0.5, 1)
131+
})
132+
.then(() => {
133+
this.spin(1)
134+
this.scaleOutAll(0.7)
135+
.then(() => {
136+
return this.scaleInAll(0.3)
137+
})
138+
139+
return this.openV(0.7)
140+
.then(() => {
141+
return this.closeV(0.3)
142+
.then(() => {
143+
this.minisOut()
144+
return this.shakeAll(0.3, 5)
145+
})
146+
})
147+
})
148+
}
149+
150+
// Take all container and zoom into positionY
151+
// Also create
152+
zoomIn (timing = 0.75) {
153+
return new Promise((resolve, reject) => {
154+
TweenMax.fromTo(this.all, timing,
155+
{y: -200},
156+
{y: this.all.positionY,
157+
ease: Power4.easeIn,
158+
onComplete: () => {
159+
resolve()
160+
}
161+
})
162+
163+
// Create trailing zoom
164+
var rect = new PIXI.Graphics()
165+
rect.beginFill(this.primaryColor, 1)
166+
rect.drawRect(0, 0, 1, 2)
167+
rect.endFill()
168+
this.app.stage.addChild(rect)
169+
170+
rect.pivot.x = rect.width / 2
171+
rect.pivot.y = 0
172+
rect.x = this.width / 2
173+
rect.y = 0
174+
175+
TweenMax.to(rect, timing,
176+
{
177+
delay: 0.1,
178+
height: this.height,
179+
ease: Power4.easeOut,
180+
onComplete: () => {
181+
TweenMax.to(rect, 0.3, {
182+
alpha: 0,
183+
width: this.width,
184+
ease: Power4.easeIn,
185+
onComplete: () => {
186+
setTimeout(() => {
187+
rect.destroy()
188+
}, 1000)
189+
}
190+
})
191+
}
192+
}
193+
)
194+
})
195+
}
196+
197+
// Load a bunch mini v's and animate them in the center
198+
minisIn () {
119199
// Load a bunch of mini v's
120200
for (var iMini = 0; iMini < 100; iMini++) {
201+
let x = this.getRandomNum(-600, this.width + 600)
202+
let y = -200
203+
let toX = this.width / 2
204+
let toY = this.height / 2
205+
121206
let vMini = this.v({
122207
scale: 0.3,
123-
x: this.getRandomNum(-600, this.width + 600),
124-
y: -200
208+
x: x,
209+
y: y,
210+
pivotX: 'center',
211+
pivotY: 'center'
125212
})
126213
this.app.stage.addChild(vMini)
127214
TweenMax.to(vMini, 0.6, {
128215
delay: this.getRandomNum(0, 2),
129216
ease: Power3.easeIn,
130-
x: this.width / 2,
131-
y: this.height / 2,
132-
height: 0,
133-
width: 0,
217+
x: toX,
218+
y: toY,
219+
alpha: 0.3,
220+
height: 5,
221+
width: 5,
134222
onComplete () {
135223
vMini.destroy()
136224
}
137225
})
138226
}
139227
}
140228

141-
// Animate is responsible for calling animations in order and timing
142-
animate () {
143-
this.spin(1)
144-
this.scaleOutAll(0.7)
145-
.then(() => {
146-
this.scaleInAll(0.3)
147-
})
148-
this.openV(0.7)
149-
.then(() => {
150-
this.closeV(0.3)
151-
.then(() => {
152-
this.shakeAll(0.3)
229+
// Load a bunch mini v's and animate them in the center
230+
minisOut () {
231+
// Load a bunch of mini v's
232+
for (var iMini = 0; iMini < 100; iMini++) {
233+
let x = this.width / 2
234+
let y = this.height / 2
235+
let toX = this.getRandomNum(0, this.width)
236+
let toY = this.getRandomNum(0, this.height)
237+
238+
let vMini = this.v({
239+
alpha: 0,
240+
scale: 0.1,
241+
x: x,
242+
y: y,
243+
pivotX: 'center',
244+
pivotY: 'center'
153245
})
154-
})
246+
this.app.stage.addChildAt(vMini, this.app.stage.length - 1) // Add to front
247+
TweenMax.to(vMini, 1, {
248+
delay: this.getRandomNum(0, 0.2),
249+
ease: Power4.easeOut,
250+
alpha: 0.1,
251+
x: toX,
252+
y: toY,
253+
onComplete: () => {
254+
// vMini.destroy()
255+
TweenMax.to(vMini, 1, {
256+
alpha: 0,
257+
x: this.getRandomNum(toX - 150, toX + 150),
258+
y: this.height,
259+
onComplete: () => {
260+
261+
}
262+
})
263+
}
264+
})
265+
}
155266
}
156267

157268
// Animate v letters spreading out
@@ -161,15 +272,19 @@ export default class VueBuildIntro {
161272
TweenMax.to(this.all.children[1], timing, {
162273
delay: delay,
163274
rotation: 120 * PIXI.DEG_TO_RAD,
164-
ease: Power3.easeIn
275+
ease: Power3.easeIn,
276+
onComplete: () => {
277+
this.shakeAll(0.3)
278+
}
165279
})
166280

167281
// Rotate top right
168282
TweenMax.to(this.all.children[2], timing, {
169283
delay: delay * 1.5,
170284
rotation: 240 * PIXI.DEG_TO_RAD,
171285
ease: Power3.easeIn,
172-
onComplete: function () {
286+
onComplete: () => {
287+
this.shakeAll(0.3)
173288
resolve()
174289
}
175290
})
@@ -238,13 +353,12 @@ export default class VueBuildIntro {
238353
})
239354
}
240355

356+
// Slam down v's
241357
scaleInAll (timing) {
242358
return new Promise((resolve, reject) => {
243-
// Open v and slam sh
244359
TweenMax.to(this.all.scale, timing, {
245360
x: 0.5,
246361
y: 0.5,
247-
// this.all.scale.set(0.4),
248362
ease: Power3.easeIn,
249363
onComplete: function () {
250364
resolve()
@@ -254,19 +368,19 @@ export default class VueBuildIntro {
254368
}
255369

256370
// Shake all container
257-
shakeAll (timing) {
371+
shakeAll (timing=0.3,shake=4) {
258372
TweenMax.fromTo(this.all, timing,
259-
{ x: this.width/2, y: this.height/2 },
260-
{ x: '+=3',
261-
y: '+=3',
373+
{ x: this.all.positionX, y: this.all.positionY },
374+
{ x: '+='+shake,
375+
y: '+='+shake,
262376
ease: RoughEase.ease.config({
263377
strength: 8, points: 20, template: Linear.easeNone, randomize: false
264378
})
265379
}
266380
)
267381

268382
// Make sure you are back to center again
269-
TweenMax.to(this.all, 0, {delay: timing, x: this.width/2, y: this.height/2})
383+
TweenMax.to(this.all, 0, {delay: timing, x: this.all.positionX, y: this.all.positionY})
270384
}
271385

272386
getRandomNum (min, max) {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /