1
- import { Animation , TheSupersonicPlugin } from '../../lib/src'
1
+ import { TheSupersonicPlugin } from '../../lib/src'
2
2
import type { Configuration as DriverConfiguration } from '../../lib/src/Driver.types'
3
+ import { toFixed } from '../../lib/src/utils'
3
4
4
5
const isMobile = matchMedia ( '(max-width: 1024px)' ) . matches
5
6
const elementSize : number = isMobile ? 150 : 190
@@ -9,6 +10,39 @@ const maxRows = Math.ceil(window.innerHeight / elementSize)
9
10
const elementsOnScreen = maxRows * maxHorizontalElements
10
11
const drivers : DriverConfiguration = { }
11
12
13
+ const props = [
14
+ {
15
+ name : 'translateX' ,
16
+ minStart : 0 ,
17
+ maxStart : 0 ,
18
+ minEnd : - ( window . innerWidth / 5 ) ,
19
+ maxEnd : window . innerWidth / 5 ,
20
+ } ,
21
+
22
+ {
23
+ name : 'translateY' ,
24
+ minStart : 0 ,
25
+ maxStart : 0 ,
26
+ minEnd : - ( window . innerHeight / 5 ) ,
27
+ maxEnd : window . innerHeight / 5 ,
28
+ } ,
29
+
30
+ {
31
+ name : 'rotate' ,
32
+ minStart : 0 ,
33
+ maxStart : 0 ,
34
+ minEnd : - 90 ,
35
+ maxEnd : 90 ,
36
+ } ,
37
+ {
38
+ name : 'scale' ,
39
+ minStart : 1 ,
40
+ maxStart : 1 ,
41
+ minEnd : 3 ,
42
+ maxEnd : 3.5 ,
43
+ } ,
44
+ ]
45
+
12
46
let row = 0
13
47
const last10sprites : any = [ ]
14
48
function gen ( ) {
@@ -76,17 +110,47 @@ for (let i = 0; i < driverAmount; i++) {
76
110
onAfterInit ( { driver } ) {
77
111
driver . data . elements = [ ]
78
112
79
- if ( driverRow >= 0 ) {
80
- for ( let index = 0 ; index < elementsPerDriver ; index ++ ) {
81
- const domElement = document . querySelector < HTMLElement > ( `#barth-${ index + driverStartFromElement } ` ) !
113
+ for ( let index = 0 ; index < elementsPerDriver ; index ++ ) {
114
+ const element : any = { }
115
+ element . domElement = document . querySelector < HTMLElement > ( `#barth-${ index + driverStartFromElement } ` ) !
116
+
117
+ element . properties = { }
118
+
119
+ for ( let i = 0 ; i < props . length ; i ++ ) {
120
+ const sourceProp = props [ i ]
121
+
122
+ element . properties [ sourceProp . name ] = { }
82
123
83
- driver . data . elements . push ( domElement )
124
+ const targetProp = element . properties [ sourceProp . name ]
125
+
126
+ targetProp . start = Math . random ( ) * ( sourceProp . maxStart - sourceProp . minStart ) + sourceProp . minStart
127
+ if ( sourceProp . name === 'opacity' || sourceProp . name === 'scale' )
128
+ targetProp . start = Number . parseFloat ( targetProp . start . toFixed ( 2 ) )
129
+ else targetProp . start = Math . ceil ( targetProp . start )
130
+
131
+ targetProp . end = Math . random ( ) * ( sourceProp . maxEnd - sourceProp . minEnd ) + sourceProp . minEnd
132
+ if ( sourceProp . name === 'opacity' || sourceProp . name === 'scale' )
133
+ targetProp . end = Number . parseFloat ( targetProp . end . toFixed ( 2 ) )
134
+ else targetProp . end = Math . ceil ( targetProp . end )
135
+
136
+ targetProp . distance = toFixed ( targetProp . end - targetProp . start , 2 )
84
137
}
138
+
139
+ driver . data . elements . push ( element )
85
140
}
86
141
} ,
87
- onBeforeRender ( { driver } ) {
88
- driver . data . elements . forEach ( ( element ) => {
89
- element . style . setProperty ( 'transform' , `translate3d(${ driver . progress * 500 } %, 0, 0)` )
142
+ onAfterRender ( { driver } ) {
143
+ driver . data . elements . forEach ( ( element : any ) => {
144
+ const translateX = element . properties . translateX . distance * driver . progress + element . properties . translateX . start
145
+ const translateY = element . properties . translateY . distance * driver . progress + element . properties . translateY . start
146
+ const scale = element . properties . scale . distance * driver . progress + element . properties . scale . start
147
+ const rotate = element . properties . rotate . distance * driver . progress + element . properties . rotate . start
148
+
149
+ element . domElement . style . setProperty ( 'transform' ,
150
+ // eslint-disable-next-line prefer-template
151
+ 'translate3d(' + translateX + 'px, ' + translateY + 'px, 0) '
152
+ + 'scale(' + scale + ') '
153
+ + 'rotate(' + rotate + 'deg' )
90
154
} )
91
155
} ,
92
156
} ,
@@ -95,7 +159,7 @@ for (let i = 0; i < driverAmount; i++) {
95
159
96
160
const plugin = new TheSupersonicPlugin ( {
97
161
drivers,
98
- debug : true ,
99
162
} )
100
163
164
+ // @ts -expect-error foo
101
165
window . plugin = plugin
0 commit comments