Sam Tremblay

May 22

💚

May 22

Hey huge thanks @GreenSock 🥳

No problem for me, I'm not mad at you. You're great, mistakes happen to everyone 💪

Best day!
Sam

May 22

Sup GSAP Team!

I paid my subscription before de renew this 3th May and I got charged again this 22th May for the renewal I suppose, but my renew is the 13.

Could you help me with that please :)?

Thank you!

May 3

41 minutes ago, mvaneijgen said:

Hi @Sam Tremblay, sorry that you feel that way. We love to help everyone here on these forums and not having an easy way to thinker with the code makes it that much harder to help you. That is why we ask our users for a minimal demo, it is a way to help us, help you! I get it can be frustrating when you're on a dead line and something is not working. My workflow debugging this would be to remove all unnecessary code and remove the ScrollTrigger logic and just see what the animation of the boxes are doing, but there is just no way for us to modify the code on a live website and thus no way to help you debug.

I personally also work in PHP, but all my animation start out on Codepen. I find it just so much easier to have a place which is just pure HTML, CSS and JS and worry about the logic that needs to happen, so when in comes time to integrate it in my framework of choice I can easily fall back on the basic version that I know is working, bonus you have an easy version you can share if things are not working!

Again we love to help, so hope you'll be able to create a minimal demo, because it looks like a cool animation!

Thank you for what you say @mvaneijgen ! This gives me the idea of creating my animations first on codepen so that I can share them later 💪

May 3

11 minutes ago, Rodrigo said:

Hey Sam,

I'm on my phone now so no chance at looking at the site.

On a quick glance at the snippet you posted, I see that in your horizontal tween you're using the default easing function which is power1.out, that will make the motion start fast and end slow. When mimicking horizontal scroll always use ease none (see the ease visualizer on our learning center).

Give that a try and let us know how it goes

Happy Tweening!

You are god! Works super good without ease 💪

From your phone too, you're magic!

Thanks!

May 3

*%$# it, close that.

Long gone are the days when people could help out without having to transfer everything to codepen 😤

May 3

Sup people of GSAP 🖖

First of all, sorry for my bad english hehe.. I'll try my best, but it's sure I'll make some mistakes.

I'm starting a website with a horizontal section that you can see here. (For now, it's done only for a screen width 1920px so please, visit the site with this viewport dimension.)

If you are ok with that, I'll not props my codes on a codepen because I think you need the entire website. In other hand, because I think the codepen box is too small right now for my non-responsive website.

Looking at the site, we can see that the elements in the horizontal section always appear later and later as we scroll down. On the other hand, the section ends at the right moment, with all the elements placed correctly.

Could you please help me to understand that? I have see multiples discussions on this forum and stackoverflow, but I can't catch.

For help you to understand my result, here is my codes:

HTML/PHP

<div class="list">
	<div class="track">
		<?php foreach(scg::field('content_about_list') as $item){ ?>
			<div class="item">
				<div class="int">
					<div class="top">
						<div class="contents">
							<span><?= $item['title']; ?></span>
							<div class="text">
								<?= $item['text']; ?>
							</div>
						</div>
					</div>
					<div class="bottom">
						<?= scg::button(
								$item['button']['text'],
								[
									'href' => $item['button']['page'],
									'class' => 'reverse circle',
									'after' => '<div class="pin"></div>'
								]
							);
						?>
					</div>
				</div>
			</div>
		<?php } ?>
	</div>
</div>

SCSS

.list{
	opacity: 0;
	margin: 180px 0 0;
	padding: 0 0 160px;
	will-change: transform, opacity;
	.track{
		display: inline-flex;
		white-space: nowrap;
		column-gap: 30px;
		will-change: transform;
		.item{
			background: var(--orange-n1-color);
			display: inline-block;
			width: 1035px;
			height: svh(820px);
			flex: 0 0 1035px;
			padding: 0 50px 44px;
			border-radius: 60px;
			white-space: initial;
			will-change: transform;
			transform: translate(0, 160px);
			.int{
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				height: 100%;
				align-content: space-between;
				.top{
					width: 100%;
					max-width: 822px;
					margin: 125px 0 0 50px;
					.contents{
						& > span{
							display: table;
							font-size: 60px;
							line-height: 80px;
							color: var(--blue-n2-color);
						}
						.text{
							margin: 20px 0 0;
							p{
								font-size: 24px;
								line-height: 140%;
								color: var(--blue-n2-color);
							}
						}
					}
				}
				.bottom{
					width: 100%;
					.btn{
						margin: 0 0 0 auto;
					}
				}
			}
			&:nth-last-child(1){
				background: var(--white-color);
			}
			&:nth-last-child(2){
				background: var(--orange-n3-color);
			}
			&:nth-last-child(3){
				background: var(--orange-n2-color);
			}
		}
	}
}

JavaScript

class Front{
    
	about(){
		
		const section = document.querySelector('main:last-child #h__about');
		if(!section) return;
		
		
		const list = section.querySelector('.corps .list');
		const track = list.querySelector('.track');
		const items = track.querySelectorAll('.item');
		
		const toMove = track.getBoundingClientRect().right - list.getBoundingClientRect().right;
		
		gsap.set(section, {
			height: '+=' + toMove
		});
		
		ScrollTrigger.refresh();
		
		const horizonTween = gsap.to(track, 1, {
			x: -toMove,
			scrollTrigger: {
				trigger: track,
				endTrigger: section,
				start: 'center center',
				end: 'bottom bottom',
				scrub: true,
				pin: list,
				pinSpacing: false
			}
		});
		
		
		gsap.to(list, 1, {
			opacity: 1,
			scrollTrigger: {
				trigger: track,
				start: 'top bottom',
				end: 'center center',
				scrub: true
			}
		});
		
		
		items.forEach(item => {
			
			gsap.to(item, 1, {
				y: 0,
				scrollTrigger: {
					trigger: item,
					start: 'left ' + list.getBoundingClientRect().right,
					end: 'right ' + list.getBoundingClientRect().right,
					containerAnimation: horizonTween,
					scrub: true,
					markers: true
				}
			});
			
		});
		
	}

}

export default Front;

A really big thank you in advance 🙏

July 31, 2023

Hehe, np @mvaneijgen

@Rodrigo, Thank you 💪

I pushed a few updates though from while you were watching until now, hope there was no bug 😅

Btw guys, sorry if my english is not accurate! I'm a frenchie boy ^^

Happy Tweening too!

July 31, 2023

Hello @chandrashekhar!

What result you want to obtain? Snap to top of next section when you stop scrolling and this next section is in viewport? Other?

Best Regards!
Sam

July 31, 2023

Sup again @mvaneijgen!

I have a question for you please :

Do you use some "Smart Invert" option with your phone? Or an option in this sense? Dark mode maybe?

I'm trying to understand why the white color is displayed black and black color is displayed white ^^

The correct display is supposed to be like this : https://www.awesomescreenshot.com/video/19556226

EDIT: I just tested the "colors inversed mode" on my Android and I obtain the same result that you. I almost got screwed 😂

Thanks again!
Sam

July 31, 2023

1 minute ago, mvaneijgen said:

Ha, not really what the forum is for, but I get it. Here you go iPhone 12 Pro Max iOS 17 public beta. Hope it helps and happy tweening! https://www.dropbox.com/scl/fi/ulfm7rb3vkl80djmi8m7x/RPReplay_Final1690798445.mov?rlkey=aea20ag10yeg27qcqu6qy9v4g&dl=0

Thank you @mvaneijgen 💪

I'm sorry to use the forum for this purpose!

The scroll seems to work good, but I have definitively a bug with the mix-blend-mode and my background!

Happy tweening too and thanks again for your help! You are awesome!
Sam

July 31, 2023

Sup people of GSAP!

I am currently developping my new Web Agency Website and I need you for a test on Mobile Apple Devices. Could you help me with that please?

Unfortunately, I have only a windows PC and an Android Phone and since I use the "normalizeScroll" with ScrollTrigger, I am not sure if on Safari (and maybe chrome, etc.), only on mobile/touch devices of Apple, the scroll works good. Can I ask you a feedback about that please?

Here is the website: https://dev.champgauche.studio/

A really big thank you 🙏

January 23, 2023

Hello @Superloop!

Put a look just there:

January 21, 2023

Hi @BruceST!

On your gsap.to that control your .one-one height, add this parameter:

onComplete: () => {
    ScrollTrigger.refresh();
}

See the Pen OJwzwmz by sam-tremblay (@sam-tremblay) on CodePen

Happy Tweening!

January 21, 2023

Hello @amapic!

Put a look on this example:

import gsap from './gsap/index.js';
import gsapCore from './gsap/gsap-core.js';

class App{
	constructor(){
		this.moveLight();
	}
	moveLight(){

		const x = gsap.quickTo('#id_element_to_move', 'x', {duration: .5, ease: 'power2'});
		const y = gsap.quickTo('#id_element_to_move', 'y', {duration: .5, ease: 'power2'});

		window.addEventListener('mousemove', (e) => {

			x(e.clientX);
			y(e.clientY);

		});

	}
}

new App();

Happy Tweening!

January 16, 2023

Hello @aok!

Try this:

See the Pen wvxqEgW by sam-tremblay (@sam-tremblay) on CodePen

EDIT: Hey @GreenSock, does kill the tween on each complete is a good mind to adopt or not?

January 15, 2023

Hillo @AlexanderGS!

I'm not sure to understand. What do you want exactly ? Is it to start each item after the other?

If yes, use "stagger" for that.

Does help you :)?

Best regards!

January 15, 2023

Hillo!

When you import, if you don't take the all.js, you need import index.js and gsap-core.js.

You'll need the CSSPlugins.js file and others maybe and some utils too.. but you don't need to import them, just have it.

January 15, 2023

Hello @kresogalic!

This cursor is render on <canvas>. You'll need a tool like THREE.js for do that.

Put a look on this URL... it's not exacly what you want, but it's close... One thing is sure, it's a good start: https://codesandbox.io/s/water-like-effect-demo-4-iermg?from-embed

You can find this CodeSandbox on this tutorial: https://tympanus.net/codrops/2019/10/08/creating-a-water-like-distortion-effect-with-three-js/

Does help you?

January 15, 2023

Hello @R007 !

The image isn't animated. The image is fixe and each pixels are animated (distortioned) with THREE.js.

For do that, you need to mesh a custom Shader that uniform your image (called texture) and some data for your texture (called DataTexture) on a Plane Geometry Face. You can use the SharderMaterial of THREE.js for that.

Put a look into this code (result: https://www.awesomescreenshot.com/video/13995579?key=ff81768b65c3645d42370c8b649b2197 (just know, the result video is done on a computer with bad framerate... it's more smooth in real)) :

'use strict';
import * as THREE from './three/three.module.js';

export default class WaterEffect{
	
	constructor(options){

		this.options = options;
		this.scene = new THREE.Scene();

		this.container = this.options.dom;

		this.width = this.container.offsetWidth;
		this.height = this.container.offsetHeight;
		this.renderer = new THREE.WebGLRenderer();
		this.renderer.domElement.id = 'bg-water';
		this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
		this.renderer.setSize(this.width, this.height);
		//this.renderer.setClearColor(0xeeeeee, 1);
		this.renderer.physicallyCorrectLights = true;
		this.renderer.outputEncoding = THREE.sRGBEncoding;

		this.container.appendChild(this.renderer.domElement);

		const frustumSize = 1; 
		const aspect = window.innerWidth / window.innerHeight;

		this.camera = new THREE.OrthographicCamera(frustumSize / - 2, frustumSize / 2, frustumSize / 2, frustumSize / -2, -1000, 1000);

		this.camera.position.set(0, 0, 2);


		this.time = 0;

		this.mouse = {
			x: 0,
			y: 0,
			prevX: 0,
			prevY: 0,
			vX: 0,
			vY: 0
		}
	}

	addObjects(){

		this.size = 32;
		const width = this.size;
		const height = this.size;

		const size = width * height;
		const data = new Float32Array( 4 * size );

		for (let i = 0; i < size; i++) {

			let r = Math.random() * 10;
			const stride = i * 4;

			data[ stride ] = r;
			data[ stride + 1 ] = r;
			data[ stride + 2 ] = r;
			data[ stride + 3 ] = 255;

		}

		// used the buffer to create a DataTexture

		this.texture = new THREE.DataTexture( data, width, height, THREE.RGBAFormat, THREE.FloatType);
		
		this.texture.magFilter = this.texture.minFilter = THREE.LinearFilter; //THREE.NearestFilter;

		this.material = new THREE.ShaderMaterial({
			extensions: {
				derivatives: true
			},
			side: THREE.DoubleSide,
			uniforms: {
				time: {
					value: 0
				},
				resolution: {
					value: new THREE.Vector4()
				},
				uTexture: {
					value: this.textures[0]
				},
				uDataTexture: {
					value: this.texture
				}
			},
			vertexShader: `
				varying vec2 vUv;
				void main() {
			        vUv = uv;
			        gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
			    }
			`,
			fragmentShader: `
				uniform float time;
				uniform float progress;
				uniform sampler2D uDataTexture;
				uniform sampler2D uTexture;
				uniform vec4 resolution;

				varying vec2 vUv;
				varying vec3 vPosition;
				float PI = 3.141592653589793238;
				void main(){
					vec2 newUV = (vUv - vec2(0.5))*resolution.zw + vec2(0.5);
					vec4 color = texture2D(uTexture, vUv);
					vec4 offset = texture2D(uDataTexture, vUv);
					gl_FragColor = vec4(vUv,0.0,1.);
					gl_FragColor = vec4(offset.r,0.,0.,1.);
					gl_FragColor = color;
					gl_FragColor = texture2D(uTexture, newUV - 0.05*offset.rg);
				}
			`
		});

		this.geometry = new THREE.PlaneGeometry(1, 1, 1, 1);
		this.plane = new THREE.Mesh(this.geometry, this.material);

		this.scene.add(this.plane);
	}

	mouseEvents(){
		window.addEventListener('mousemove', (e) => {
			this.mouse.x = e.clientX/this.width;
			this.mouse.y = e.clientY/this.height;

			this.mouse.vX = this.mouse.x - this.mouse.prevX;
			this.mouse.vY = this.mouse.y - this.mouse.prevY;

			this.mouse.prevX = this.mouse.x;
			this.mouse.prevY = this.mouse.y;

		});
	}

	updateDataTexture(){
		let data = this.texture.image.data;

		for (var i = 0; i < data.length; i+=4) {
			data[i] *= 0.91;
			data[i+1] *= 0.91;
		}

		
		let gridMouseX = this.size*this.mouse.x;
		let gridMouseY = this.size*(1-this.mouse.y);
		let maxDist = this.size/4;

		for (var i = 0; i < this.size; i++) {
			for (var j = 0; j < this.size; j++) {
				
				let distance = (gridMouseX - i)**2 + (gridMouseY - j)**2;
				let maxDistSq = maxDist**2;

				if(distance<maxDistSq){
					let index = 4*(i + this.size*j);

					let power = maxDist/Math.sqrt(distance);
					//if(distance < 1) power = 1;

					data[index] += this.mouse.vX * power;
					data[index+1] -= this.mouse.vY * power;
				}

			}
		}

		this.mouse.vX *= 0.91;
		this.mouse.vY *= 0.91;
		

		this.texture.needsUpdate = true;
	}

	render(){

		this.time += 0.05;
		this.updateDataTexture();
		this.material.uniforms.time.value = this.time;
		requestAnimationFrame(this.render.bind(this));
		this.renderer.render(this.scene, this.camera);
	}

	setupResize(){
		window.addEventListener('resize', this.resize.bind(this));
	}

	resize(){
		this.width = this.container.offsetWidth;
		this.height = this.container.offsetHeight;
		this.renderer.setSize(this.width, this.height);
		this.camera.aspect = this.width / this.height;

		/*
		* Cover Image
		*/
		let a1, a2;
		this.imageAspect = 1./1.5;
		if(this.height/this.width > this.imageAspect){
			a1 = (this.width/this.height) * this.imageAspect;
			a2 = 1;
		} else {
			a1 = 1;
			a2 = (this.height/this.width) / this.imageAspect;
		}

		this.material.uniforms.resolution.value.x = this.width;
		this.material.uniforms.resolution.value.y = this.height;
		this.material.uniforms.resolution.value.z = a1;
		this.material.uniforms.resolution.value.w = a2;

		this.camera.updateProjectionMatrix();
	}
}

Run it:

import * as THREE from './three/three.module.js';
import WaterEffect from './water.js';

class App{

	constructor(){
		this.gwater = new WaterEffect({
        		dom: your_container_here
        	});
      
      		this.loader();
	}

	loader(){
		this.gwater.loadingManager = new THREE.LoadingManager();
		this.gwater.textureLoader = new THREE.TextureLoader(this.gwater.loadingManager);

		this.gwater.textures = [];

		this.gwater.textures.push(this.gwater.textureLoader.load('/wp-content/themes/gate-child/assets/images/mono.png'));
	

		this.gwater.loadingManager.onLoad = () => {
			
			/*
			* Alright, THREE.js is ready, run IT
			*/

			this.gwater.addObjects();
			this.gwater.resize();
			this.gwater.render();
			this.gwater.setupResize();
			this.gwater.mouseEvents();

		}
	}
}

new App();

You can reach THREE.js Loading Progression before onLoad... Put a look here: https://threejs.org/docs/index.html?q=loading#api/en/loaders/managers/LoadingManager

September 22, 2022

Hi @Delarge!

Is that possible to provide a demo from codepen please? I'm not sure without testing, but your example seems to be something like the URL you propose... I have tested some part of your code by copy/paste him in the codepen of the DEMO, but is working good for me.

ScrollTrigger is register too?

gsap.registerPlugin(ScrollTrigger);

Best regards!
Sam

September 17, 2022

Hi momo!

I'm not sure I understand good, sorry for my bad english, but try position fixed on your .middle-mask element. Does help you?

Best Regards!

Sam

September 15, 2022

EDIT: REMOVE THAT HEHE

September 12, 2022

Thanks @Rodrigo!

I'll test some things this week and come back to push a feedback

Have a nice day!

September 12, 2022

Hi @stvn!

Put a look on that:

See the Pen JjvRGJw by sam-tremblay (@sam-tremblay) on CodePen

Just play with the ease, stagger and CSS transform of .word elements if you want more style in your reveal.

Ease Docs: https://greensock.com/docs/v3/Eases

Stagger Docs: https://greensock.com/docs/v3/Staggers

SplitText Docs: https://greensock.com/docs/v3/Plugins/SplitText

Happy Tweening!

Sam

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Sam Tremblay