Creativist-Lab

Hello @Cassie, yes I understand this but I thought because I literally copied some examples to test this which gave the same result it wouldn't bring much insight because on Codepen the examples work normally. So what I did now which is hopefully ok is made a test on the site that I'm working on so this example I copied on my site: https://greensock.com/docs/v3/GSAP/CorePlugins/ModifiersPlugin And here you can see how it behaves on my site: Test I'm sorry for bothering you guys with it but I have been trying to figure out things for a long time but I keep getting the same results that's why I thought maybe better ask here. Thanks again.

Hello, I'm having some problems with some of my tweens and my suspicion is that there is a conflict but I'm kinda at a dead-end with my knowledge. So my main question is what is the best way to debug when there are no errors showing in the console? I'm working in WordPress so I already switched all other plugins off, cleared all caches etc. Also I followed some examples from the forum which are working without any errors on my site but I'm getting a different result in its behavior compared to the examples. I followed on this page the example of the wrap utility function: https://greensock.com/docs/v3/GSAP/CorePlugins/ModifiersPlugin And a few other examples that should give similar results but they all behave in a similar unwanted way (so at least something is consistent ) Basically what I'm trying to achieve is having a line with text move from right to left in a endless loop I tried what I think is the easiest option first with the following code: gsap.to('.newsline', {x: -720, duration: 5, ease: 'none', repeat: -1 }) But what happens is after the first duration the tween just kinda bounces a bit from left to right you can see the live example here: Mister Bamboo Straws | Premium | Reusable | Customized branded straw | Eco friendly | Eco-friendly and reusable plastic straw alternative, Premium bamboo laser branded straws Thanks in advance for any help/tips!

Thanks a lot! That does the trick

Hello guys, I'm following Carl Schooff his tutorials and I'm a total beginner with GSAP and Javascript, so most likely the mistake(s) are totally on me I just can't figure out what I'm doing wrong. This is the code that I'm using: gsap.registerPlugin( SplitText, ScrollTrigger ); let wrappers = document.querySelectorAll('.wrapper') wrappers.forEach( ( element ) => { let heading = element.querySelector('h2') let paragraph = element.querySelector('p') paragraph = new SplitText('p') console.log(element); let tl = gsap.timeline() .from(heading, {opacity: 0, yPercent:100, duration: 0.3, ease: 'back' }) .from(paragraph.lines,{opacity: 0, yPercent: 100, stagger: 0.15, duration: 0.3, ease: 'ease.in'}, '>') ScrollTrigger.create({ trigger:element, start: 'top 90%', toggleActions:'play none none reset', animation:tl, markers: true, }) }) So I created divs with the class 'wrapper' and in those divs I'm targeting the h2 and p element. The h2 elements are animating in as I wanted but the 'p' elements take a long time to animate in and also the 'p' that are not having a class of 'wrapper' are being animated. Furthermore I'm getting the following warnings: gsap.min.js:10 GSAP target null not found. https://greensock.com and gsap.min.js:10 GSAP target not found. https://greensock.com I have been trying to figure out for quite some time now what I'm doing wrong but with no success unfortunately. Any help would be very much appreciated and so thanks in advance.

@OSUblake thanks for your message. I still didn't manage it completely via the NPM route, probably I need a bundler because I'm getting an error in the console saying: Uncaught SyntaxError: Cannot use import statement outside a module is my guess correct that I get this error because of not using a bundler?

Hey Jack, thanks. Well I will go for that option if I can't get it to work via the NPM. I don't mind learning new things that's why I took this road first but yeah as you understand I have totally no experience with all of this. But it looks like I took the right steps and everything is uploaded and activated via the NPM route. If so it is an easy process (when you know what to do haha). Anyways thanks for your help. Cheers.

Hello guys, here I'm again. Since I still have no clue what I'm doing here I'm checking up with you guys if it is correct what I have done. I followed the GSAP instruction video after setting up VScode. I created a NPMRC file in my project directory with the command prompt. After this I installed GSAP also via the command line in this directory as shown in the instruction video. So after this I got the following screen giving some warnings, so I don't know if everything went well. When all if this is looking good my next step would be installing the plugins that I want to use by following "How to Install GSAP via Modules (npm, Yarn)"video and then just upload it to the server? Again my apologies for these noob questions, hopefully I'm getting into the right direction now as this whole process has been taking me way too long ¯\_(ツ)_/¯ Thanks in advance.

Thanks Cassie, I will check this one.

Hello Jack thanks. So yeah the thing is even after trying to find some documentation on the things that you mention, I really have no knowledge (yet) on how to do this. There is so much information available but I can't seem to find the proper steps on how to do this on my WordPress site. If I understand you correct I need to setup a terminal between the editor that I'm using (VsCode) and my WordPress install, is this correct? Because I need to run npm install ./gsap-bonus.tgz in VsCode and upload it to my project directory which is WordPress? Sorry for these maybe very simple questions but I guess one has to start somewhere and I just have no clue how to take the proper steps to do this. Thanks again.

Hello guys, sorry for this very newbie question. I just became a Club Greensock member so I have access to all the plugins. But I'm kinda stuck with how to register via a NPMRC file. I watched the tutorial on how to do this but it doesn't go enough into detail about how to create this file (I'm a total noob with this process). Is there somewhere a more detailed video/tutorial on how to create this file and implement it into my website? Just some additional info, I'm using WordPress, I already installed Node.js and I'm using VsCode on a Windows system. Any help is much welcome and thanks in advance! Cheers.

Thanks Cassie for this I will see if I can solve it with this info.

Hello Jack, that was my thought also. I just thought maybe there is someone here who ran into a similar problem and has a solution. Anyway thanks again for your message.

Hello again, I thought I had everything fixed but turns out something is still not good. Although on the front end everything seems to load normal I get the following results when using Google pagespeeds (see the screenshot) should I just ignore this or is there something I can do. Just a bit of additional info, I turned of all caching plugins and I updated GSAP via CDN to 3.7 but there is still a primary thread blocking going on of almost 22 seconds. Thanks again.

Hello Jack, thanks for looking into this. I played a bit with the caching plugin that I'm using and you are right, minifying the js and css was causing the problem. All good now

Hey guys, I just noticed that when I'm loading GSAP's Core via the CDN that the loading time of my page increases by 24 seconds. So my question is what is the best way to load GSAP and that it doesn't influence performance too much (in my understanding this is by loading via a CDN) so my suspicion is that there is something else going on. Just for info, at the moment I installed GSAP core and ScrollTrigger. Thanks in advance for any help. This is the url: https://creativist-lab.com

Thanks Cassie!

Oh thank you! I have been mixing and matching for too long so I didn't even see this. Yes I'm able to target parts of the model now instead of having the whole canvas being animated. Thanks a lot everyone for helping me out!

Oh thank you! I have been mixing and matching for too long so I didn't even see this. Yes I'm able to target parts of the model now instead of having the whole canvas being animated. Thanks a lot everyone for helping me out!

Hello Blake, thanks for your reply. The model does load. I tried some different orders but I can't get it to work. When i change the order I get the error: invalid property rotate set to 720 Missing plugin? gsap.registerPlugin()

Thanks Cassie for checking that. I will soon try this and let you know how it goes. When I can't figure it out I will try the minimal demo option. Cheers!

Hello Cassie, thanks for your reply. I just keep getting the same error: Uncaught ReferenceError: brainRight is not defined. Btw, I checked your website and one of your lectures. You're doing cool stuff!

Hello all, I just started out with Three.js and GSAP so I'm probably overlooking something very simple. But I can't seem to target a part of my 3D model to animate it. I only managed to animate the whole model by assigning the container where the model is located (just to see if GSAP is working). When I try to target a part of the model I always get the following error: "name" is not defined. Anyone that can point me in the right direction on how I can target the different elements within a 3D model? This is how I set things up: // Model let myModel; let modelPath_MyModel = 'https://mywebsite/wp-content/uploads/2021/05/new_brain.glb'; let isLoaded = false; let sphere; // Material let texturePath_Enviroment = 'https://mywebsite/wp-content/uploads/2021/05/Matcap-test21-min.png'; let mat_Enviroment; let mat_GlassMatCapBack; let mat_GlassMatCapFront; let mat_BrainCoreBlue; let mat_BrainInnerOutterBlue; let mat_BrainCoreRed; let mat_BrainInnerOutterRed; const statsEnabled = false; let container, stats; // three let scene; let camera; let renderer; let controls; let delta; let mouseX = 0; let mouseY = 0; let targetX = 0; let targetY = 0; const windowHalfX = window.innerWidth / 2; const windowHalfY = window.innerHeight / 2; function initMainApp () { buildScene(); buildLightEnviroment(); buildMaterial(); buildModel(); watchLoadingManager(); buildSphereGeometry(); } function buildScene () { const container = document.querySelector('#mainCanvas'); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 100); camera.position.z = 14; camera.position.y = 1; const cameraHolder = new THREE.Group(); cameraHolder.add(camera); scene.add(cameraHolder); renderer = new THREE.WebGLRenderer({ container, antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(1.5); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.shadowMap.needsUpdate = true; stats = new Stats(); container.appendChild(renderer.domElement); controls = new THREE.OrbitControls(camera, renderer.domElement ); controls.enableDamping = true; controls.dampingFactor = 0.08; controls.enableZoom = false; controls.enablePan = false; controls.enabled = true; controls.maxAzimuthAngle = Math.PI * 0.2; controls.minAzimuthAngle = Math.PI * 1.7; controls.maxPolarAngle = 1.7; controls.minPolarAngle = 1.2; controls.autoRotate = false; controls.autoRotateSpeed = 2; } function buildLightEnviroment () { const light_Directional = new THREE.DirectionalLight(0xFFFFFF); light_Directional.position.set(3, 3, 3); light_Directional.intensity = 0.5; light_Directional.castShadow = true; light_Directional.shadow.bias = -0.00001; light_Directional.shadow.mapSize.width = 2048; light_Directional.shadow.mapSize.height = 2048; scene.add(light_Directional); const light_Ambient = new THREE.AmbientLight(0xFFFFFF); light_Ambient.intensity = 0.15; scene.add(light_Ambient); const lightpoint3 = new THREE.PointLight(0xFFFFFF,0.4); lightpoint3.position.set(100,200,500); scene.add(lightpoint3); mat_Enviroment = new THREE.TextureLoader().load(texturePath_Enviroment); mat_Enviroment.mapping = THREE.SphericalReflectionMapping; } function buildSphereGeometry () { const geometry = new THREE.SphereGeometry( 0.50, 32, 32 ); const material = new THREE.MeshBasicMaterial( {color: 0xff4514} ); const sphere = new THREE.Mesh( geometry, material ); sphere.position.y = 1; sphere.position.x = -0.6; sphere.position.z = 1.1; scene.add( sphere ); const geometry1 = new THREE.SphereGeometry( 0.50, 32, 32 ); const material1 = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); const sphere2 = new THREE.Mesh( geometry1, material1 ); sphere2.position.y = 2.8; sphere2.position.x = 0; scene.add( sphere2 ); const geometry2 = new THREE.SphereGeometry( 0.50, 32, 32 ); const material2 = new THREE.MeshBasicMaterial( {color: 0x03acee} ); const sphere3 = new THREE.Mesh( geometry2, material2 ); sphere3.position.y = 1.5; sphere3.position.x = 0.6; sphere3.position.z = -0.9; scene.add( sphere3 ); } function buildModel () { const loader_GLTF = new THREE.GLTFLoader(); loader_GLTF.load(modelPath_MyModel, function (gltf) { myModel = gltf.scene; scene.add(myModel); myModel.position.y = -2.3; myModel.traverse(function (child) { if (child.isMesh) { child.frustumCulled = false; if ( child.name == 'brain_right_core') { brainRight = child; child.material = mat_BrainCoreBlue; child.renderOrder = 1; child.castShadow = true; child.receiveShadow = true; } else if ( child.name == 'brain_right_inner' ) { child.material = mat_BrainInnerOutterBlue; child.renderOrder = 2; } else if ( child.name == 'brain_right_outer' ) { child.material = mat_BrainInnerOutterBlue; child.renderOrder = 4; } else if ( child.name == 'brain_left_core') { child.material = mat_BrainCoreRed; child.renderOrder = 2; } else if ( child.name == 'brain_left_inner') { child.material = mat_BrainInnerOutterRed; child.renderOrder = 3; child.castShadow = true; child.receiveShadow = true; } else if ( child.name == 'brain_left_outer') { child.material = mat_BrainInnerOutterRed; child.renderOrder = 5; } else if ( child.name == 'bottle') { child.material = mat_GlassMatCapBack; child.renderOrder = 6; let bottleClone = child.clone(); bottleClone.material = mat_GlassMatCapFront; scene.getObjectByName( "BrainBottle" ).add( bottleClone ); } } });}); } function buildMaterial () { mat_GlassMatCapBack = new THREE.MeshMatcapMaterial({ color: 0xFFFFFF, matcap: mat_Enviroment, side: THREE.BackSide, transparent: true, opacity: 0.35, blending: THREE.AdditiveBlending, // THREE.CustomBlending for normal look }); mat_GlassMatCapFront = new THREE.MeshMatcapMaterial({ color: 0xFFFFFF, matcap: mat_Enviroment, side: THREE.FrontSide, transparent: true, opacity: 1, blending: THREE.AdditiveBlending, // THREE.CustomBlending for normal look }); mat_BrainCoreBlue = new THREE.MeshPhongMaterial({ color: 0x25cdda, emissive: 0x000000, blending: THREE.CustomBlending, side: THREE.FrontSide, depthWrite: false, depthTest: true, transparent: true, opacity: 0.60, }); mat_BrainInnerOutterBlue = new THREE.MeshPhongMaterial({ color: 0x25cdda, emissive: 0x00FFFF, blending: THREE.CustomBlending, side: THREE.FrontSide, depthWrite: false, depthTest: true, transparent: true, opacity: 0.20, }); mat_BrainCoreRed = new THREE.MeshPhongMaterial({ color: 0xcb5332, emissive: 0x000000, blending: THREE.CustomBlending, side: THREE.FrontSide, depthWrite: false, depthTest: true, transparent: true, opacity: 0.80, }); mat_BrainInnerOutterRed = new THREE.MeshPhongMaterial({ color: 0xcb5332, emissive: 0xFFFF00, blending: THREE.CustomBlending, side: THREE.FrontSide, depthWrite: false, depthTest: true, transparent: true, opacity: 0.20, }); } // EVENTS document.addEventListener( 'mousemove', onDocumentMouseMove ); window.addEventListener( 'resize', onWindowResize ); function onWindowResize() { renderer.setSize( window.innerWidth, window.innerHeight ); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); } function onDocumentMouseMove( event ) { mouseX = ( event.clientX - windowHalfX ); mouseY = ( event.clientY - windowHalfY ); } function animate () { requestAnimationFrame(animate); render(); if ( statsEnabled ) stats.update(); } function render() { targetX = mouseX * .001; targetY = mouseY * .001; if ( myModel );{ myModel.rotation.y += 0.05 * ( targetX - myModel.rotation.y ); myModel.rotation.x += 0.05 * ( targetY - myModel.rotation.x ); } renderer.render(scene, camera); controls.update(); } function startApplication () { animate(); } function watchLoadingManager () { THREE.DefaultLoadingManager.onStart = function ( url, itemsLoaded, itemsTotal ) { }; THREE.DefaultLoadingManager.onLoad = function () { console.log('Loading Complete!'); isLoaded = true; startApplication(); }; THREE.DefaultLoadingManager.onProgress = function ( url, itemsLoaded, itemsTotal ) { // console.log('Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.'); }; THREE.DefaultLoadingManager.onError = function ( url ) { // console.log('There was an error loading ' + url); }; } initMainApp(); //GSAP gsap.to(brainRight.position,{duration: 2, delay: 2, rotate: 720, scale: 0.3, ease: 'bounce' }); Thanks in advance.