benoit958

Haa, ok I get it now. Thanks !

Hello, yes but the second option doesn't recalculate width on each repeat. I've updated the codepen sketch https://codepen.io/mi-re/pen/qBwgPqR

Thank you Rodrigo, the thing is if I'm doing that width: gsap.utils.random(0, 20) + "%", width is calculated just once and not on each repeat cycle. but this is working, thanks width: () => gsap.utils.random(0, 20, true)() + "%"

Hello ! I'm facing a little issue using gsap.utils.random. I'm trying to randomize height and width of boxes on each repeat and appending "%" sign to use percentage. Here is what I noticied : i can't use AND append some string. Is this a bug or am I missing something ? width: gsap.utils.random(0, 20) + "%", // working // width: gsap.utils.random(0, 20, true), // working // width: gsap.utils.random(0, 20, true) + "%", // not working I've made a codepen exemple : https://codepen.io/mi-re/pen/qBwgPqR

Perfect, thanks a lot !

Thanks Rodrigo, It definitly helps but I'm still confused on how I should calculate that start position. In my case I have other regular sections in between and I want different animation to happen for each section. I thought I could simply add section.offsetTop to self.previous().end but it only works for the second section (after hero in my example). I expected the animation to start when third section reaches the top of the window too. https://codepen.io/benoitbohnke/pen/dywpqZo

Hello, I'm having trouble using scrolltrigger multiple pinned sections. I'd like to have multiple pinned sections where a carousel is “activated” once user’s scroll reached the center of the element. As it's important that rest of the content stays visible when a section is pinned, I'm using the “main” element as pin value. My problem is that the start position of the second section is messed up by the previous one. Hope it's clear.. It's certainly not the right method so if someone could help understand how to approach I'd be grateful

Many thanks, what I’ve ended up with is to store the offset property and re-apply it to the map object, right after texture swap. Works well that way. Thanks for the example and explanation https://codepen.io/mi-re/pen/xxJByjz

Here is a codepen https://codepen.io/mi-re/pen/oNMVpGw Actually, while I was doing it I get what you meant (and feel a bit stupid of my mistake ? ) I guess I need to find a way to switch my texture image’s property and not the entire “map” object to keep reference to the offset “y” property right ?

Thank you for your reply, Sorry, my code is a bit confusing. texture.map is a url. It's not a js object. Again, if I'm doing this manually, my texture is well replaced without changing the object’s material offset and I’m still able to animate it. material.map = new THREE.TextureLoader().load('myurl'); But when I'm doing it using a callback with .call or .add my material’s offset is not animated anymore. This is the exact same method just not triggers by a timeline object.. I’m going to do a codepen example.

Hello there, I came accross a very strange and specific issue using threejs + gsap. I’m working with threejs and using a timeline to animate textures offsets (it moves the texture on a 3d sphere). Everything works well but I need to be able to switch from a texture to another at certain points of the animation. I want to reuse the same material but switch to another image at a certain position. To do so I decided to use “.call” to trigger a function (setTexture). Problem is when I'm doing this, the animation for that material is not playing anymore. The texture has switched but the “y” offset value is not updated. (When I'm just using setTexture without gsap, I'm able to switch my texture and it's still animated so the problem doesn't seems to come from here) Anyway, here is the code I'm using var setTexture = function(material, texture){ material.map = new THREE.TextureLoader().load(texture.map); console.log('test') } // setTexture(sphere.material[0], textures[1]); tl.call(setTexture, [sphere.material[0], textures[1]], "1") tl.fromTo(sphere.material[0].map.offset, {y:-1},{y:1, duration:2}, "2"); tl.fromTo(sphere.material[2].map.offset, {y:-1},{y:1, duration:8}, "10"); tl.fromTo(sphere.material[1].map.offset, {y:-1},{y:1, duration:8}, "11"); tl.fromTo(sphere.material[3].map.offset, {y:-1},{y:1, duration:8}, "13"); tl.fromTo(sphere.material[0].map.offset, {y:-1},{y:1, duration:8}, "16"); Many thanks for you help !! B