https://msb-engineering.com/wp-content/themes/msbenbow/src/js/components/greensock.js

1gsap.registerPlugin(ScrollTrigger);
2
3// Cube Variation 1
4let v1c1 = document.querySelector('.variation-1-cube-1');
5if(v1c1){
6gsap.fromTo(
7	".variation-1-cube-1",
8	{ y: -150 },
9	{
10		y: 0,
11		scrollTrigger: {
12			trigger: ".cube-variation-1",
13			start: "top 80%", // Adjusted start position
14			end: "bottom 20%", // Adjusted end position
15			scrub: 0.2,
16			triggerOnce: true,
17			toggleActions: "play none none none",
18		},
19	}
20);
21}
22
23let v1c2 = document.querySelector('.variation-1-cube-2');
24if(v1c2){
25gsap.fromTo(
26	".variation-1-cube-2",
27	{ y: 150 },
28	{
29		y: 0,
30		scrollTrigger: {
31			trigger: ".cube-variation-1",
32			start: "top 80%", // Adjusted start position
33			end: "bottom 20%", // Adjusted end position
34			scrub: 0.2,
35			triggerOnce: true,
36			toggleActions: "play none none none",
37		},
38	}
39);
40}
41
42let v1c3 = document.querySelector('.variation-1-cube-3');
43if(v1c3){
44
45gsap.fromTo(
46	".variation-1-cube-3",
47	{ y: 150 },
48	{
49		y: 0,
50		scrollTrigger: {
51			trigger: ".cube-variation-1",
52			start: "top 80%", // Adjusted start position
53			end: "bottom 20%", // Adjusted end position
54			scrub: 0.2,
55			triggerOnce: true,
56			toggleActions: "play none none none",
57		},
58	}
59);
60}
61
62let v2c1 = document.querySelector('.variation-2-cube-1');
63if(v2c1){
64// Variation Cube 2
65gsap.fromTo(
66	".variation-2-cube-1",
67	{ y: -150 },
68	{
69		y: 0,
70		scrollTrigger: {
71			trigger: ".cube-variation-2",
72			start: "top 99%", // Adjusted start position
73			end: "bottom 1%", // Adjusted end position
74			scrub: 0.2,
75			triggerOnce: true,
76			toggleActions: "play none none none",
77		},
78	}
79);
80}
81
82let v2c2 = document.querySelector('.variation-2-cube-2');
83if(v2c2){
84gsap.fromTo(
85	".variation-2-cube-2",
86	{ y: 150 },
87	{
88		y: 0,
89		scrollTrigger: {
90			trigger: ".cube-variation-2",
91			start: "top 80%", // Adjusted start position
92			end: "bottom 20%", // Adjusted end position
93			scrub: 0.2,
94			triggerOnce: true,
95			toggleActions: "play none none none",
96		},
97	}
98);
99}
100
101let v3c1 = document.querySelector('.variation-3-cube-1');
102if(v3c1){
103// Cube Variation 3
104gsap.fromTo(
105	".variation-3-cube-1",
106	{ y: -150 },
107	{
108		y: 0,
109		scrollTrigger: {
110			trigger: ".cube-variation-3",
111			start: "top 80%", // Adjusted start position
112			end: "bottom 20%", // Adjusted end position
113			scrub: 0.2,
114			triggerOnce: true,
115			toggleActions: "play none none none",
116		},
117	}
118);
119}
120
121let v3c2 = document.querySelector('.variation-3-cube-2');
122if(v3c2){
123gsap.fromTo(
124	".variation-3-cube-2",
125	{ y: 150 },
126	{
127		y: 0,
128		scrollTrigger: {
129			trigger: ".cube-variation-3",
130			start: "top 80%", // Adjusted start position
131			end: "bottom 20%", // Adjusted end position
132			scrub: 0.2,
133			triggerOnce: true,
134			toggleActions: "play none none none",
135		},
136	}
137);
138}
139
140let v4c1 = document.querySelector('.variation-4-cube-1');
141if(v4c1){
142// Cube Variation 4
143gsap.fromTo(
144	".variation-4-cube-1",
145	{ y: 150 },
146	{
147		y: 0,
148		scrollTrigger: {
149			trigger: ".cube-variation-4",
150			start: "top 80%", // Adjusted start position
151			end: "bottom 20%", // Adjusted end position
152			scrub: 0.2,
153			triggerOnce: true,
154			toggleActions: "play none none none",
155		},
156	}
157);
158}
159
160let v4c2 = document.querySelector('.variation-4-cube-2');
161if(v4c2){
162gsap.fromTo(
163	".variation-4-cube-2",
164	{ y: -150 },
165	{
166		y: 0,
167		scrollTrigger: {
168			trigger: ".cube-variation-4",
169			start: "top 80%", // Adjusted start position
170			end: "bottom 20%", // Adjusted end position
171			scrub: 0.2,
172			triggerOnce: true,
173			toggleActions: "play none none none",
174		},
175	}
176);
177}
178
179let v4c3 = document.querySelector('.variation-4-cube-3');
180if(v4c3){
181gsap.fromTo(
182	".variation-4-cube-3",
183	{ y: 150 },
184	{
185		y: 0,
186		scrollTrigger: {
187			trigger: ".cube-variation-4",
188			start: "top 80%", // Adjusted start position
189			end: "bottom 20%", // Adjusted end position
190			scrub: 0.2,
191			triggerOnce: true,
192			toggleActions: "play none none none",
193		},
194	}
195);
196}