Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

5 Newbie

About Tonycre8

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Okay I finally got it! I'll drop a video here to just to show you guys. Just had to tweet how I was doing things, and adding labels too to keep the timeline going. Here's a snippet of what's changed: let car_anim = gsap.timeline({ duration: 1, scrollTrigger: { trigger: "#slide2", endTrigger: "#slide4", start: "top top", end: "+=3000", scrub: 1, markers: true } }) ScrollTrigger.defaults({ immediateRender: false, ease: Power1.inOut }) // Slide 2 car_anim .add("slide2", 0) .add("slide3", 10) .add("slide4", 20) car_anim .to(scene.rotation, {y: -1.55, duration: 4}, "slide2") .to(camera.position, {x: -0.1, duration: 4}, "slide2") // Slide 3 .to(scene.rotation, {z: 1.6, duration: 4}, "slide3") // Slide 4 .to(camera.position, {x: -.15, z: 4.2, duration: 4}, "slide4") .to(scene.rotation, {z: .035, y: -3.15, duration: 4}, "slide4") And then here's the video: Thanks a lot you guys for the help! -Tony
  2. Okay so with that example then, how would I get it to properly stagger between slides? I can't get the start times to quite align. For example, I've copied a bit of what akapowl has and tried messing with it, but the animations trigger too quickly. Where I want one option to be tweened later on, it tweens it straight away. As an example in this image, the car should only be rotated fully like this when the pink is fully visible. I.e. and entire slide covers the view. But it's already at this point by the time I get to the second slide. Which is odd, considering I told it to **start** at the second slide, but it's now ending it's animation on there. Here's a quick snippet: let car_anim = gsap.timeline({ scrollTrigger: { trigger: "#slide2", endTrigger: "#slide5", start: "top top", end: "+=1000", scrub: 1 } }) ScrollTrigger.defaults({ immediateRender: false, ease: Power1.inOut }) car_anim // Slide 2 .to(scene.rotation, {y: -1.6}, 0) .to(camera.position, {x: -0.1}, 0) // Slide 3 .to(scene.rotation, {z: 1.6}) // This happens too quickly! Any advice on how to get that to work? So that it only triggers when it hits the next slide?
  3. I was going to say, I was just experiencing a little issue with the scrolling where the object has some trouble flicking about a bit haha Not so sure how to implement buffer-zones though. Would these be like, additional divs to end on? I'm a bit new haha
  4. This works like a charm! Thanks a lot you guys! I'll definetely have a look at making my code a little cleaner too haha. Thanks a lot to the lot of you champs. Also, quick shoutout to @akapowl for making a CodePen because I was too lazy too :'> Appreciate it
  5. Hey guys, I'm having some trouble on something this evening, was wondering if you guys could help. Given that this uses a 3d model, I can't attach a codepen unfortunately. But I'll do the best to include all relevant code snippets and give all the details I can. I've been working on a website that uses scroll trigger to move content around, and also to move around this 3D car model that I have. I have 4 different slides, and for the sake of simplicity, I've gone ahead and recoloured them. Slide 1: Blue, start slide Slide 2: Pink, slides in from the right Slide 3: Yellow, slides in from bottom Slide 4: Green, slides in from the right Now Slide 4 is the main culprit, I'm trying to move this car around to have the car in the 4th slide look like the image below: However, the transition to the image is a little less than sleek. I've attached a video of how the transitions currently look, scrolling between these different slides. Ignore the music, I just recorded this very quickly on my ShadowPlay. Now let's talk about the code I've got. I'm trying to use ScrollTrigger to move between all of these, and I created a variable for a timeline just so I could keep it all in check (or so I thought). Here's what I have thusfar. scene.rotation.set(0, 9.8, 0) camera.position.set(-1.2,0,5) let car_anim = gsap.timeline() // Slide 2 car_anim.to(scene.rotation, {y: 4.79, easing: Power1.easeInOut, scrollTrigger: { trigger: "#slide2", scrub: 1, }}, 0) car_anim.to(camera.position, {x: -0.1, easing: Power1.easeInOut, scrollTrigger: { trigger: "#slide2", scrub: 1, start: "right right" }}, 0) // Slide 3 car_anim.to(scene.rotation, {z: 1.6, easing: Power1.easeInOut, scrollTrigger: { trigger: "#slide3", scrub: 1, start: "top top" }}, 0) // Slide 4 - The problem child car_anim.to(scene.rotation, {z: 0.02, y: 3.1, easing: Power1.easeInOut, scrollTrigger: { trigger: "#slide4", scrub: 1, start: "right+=2500 right" }}, 0) car_anim.to(camera.position, {x: 0.16, easing: Power1.easeInOut, scrollTrigger: { trigger: "#slide4", scrub: 1, start: "right+=2500 right" }}) I start out with setting a base camera position and scene position. The scene position refers to the car, and the camera just refers to the camera. The first three slides work well. I have another video somewhere of all of those working just fine. I'm just having trouble of smoothly continuing the movements of the car. It's not a ThreeJS issue I don't think. I'm pretty sure it's just the start of the scroll trigger, given that the other ones have worked fine. I guess it's as I've started making more complex movements. So yeah, how do you think I could get these working at all? I'm not entirely sure what I'm doing wrong to be very honest with you. Thanks in advance, and sorry for the lack of codepen - it's a little hard to do with all the technical set up. UPDATE: Just an edit after I've played around with it a bit more. I think it's becoming less and less of a gsap issue, but I'll keep this thread up in case anyone else knows how to solve it / it can be used as a future reference. It seems as if when I modify a different axis more than once (i.e. the y-axis), it updates the value weirdly. I don't have console log proof, but I messed around with the 4th slide and it seems to transition fine when I set it to affect the x-axis - a property that has yet to be used with the scene rotation.
  6. Yes! Exactly solves my issue, thanks a lot!
  7. Hey guys, I'm having a little trouble with something. I'm trying to work out how to get ScrollTrigger to animate content when the slide is fully on screen. In the codepen I've added, there are animated panels on the second slide. However, they animate before you even get onto that slide. Is there any way to delay the animation until the user has gotten fully onto that slide? Thanks a lot,
  8. Well, I logged on this afternoon to see if I could replicate the issue. I ended up fixing it. I'm not exactly sure how but now everything seems to work. I think this might also be because when I installed gsap via npm, it initially gave me version 3.3.4 instead of 3.4.0? Who knows. Anyways, thanks a lot for your support nonetheless!
  9. Turns out I did need the -1 afterall! It's something to do with calculating where to end the panels. I tried to get the pen to recreate the issue, but when I put my code in everything was valid lol. So I'm not sure. I did eventually, manage to get it to work. But it involved some incredibly unhealthy practices, such as putting a body tag, inside of a body tag, embedded by other divs. Embedded within my current learning project for this, I have changed my code slightly to bend to the demands of ScrollTrigger. In my page.js for example, which is a template for my project (header and nav functionality), I have this: return ( <> <div className="loader" ref={el => {loader = el}}> <div className="loader-content" ref={el => {loadContent = el}}> <img src={Logo}></img> <h2>Welcome</h2> </div> </div> <div className="page" ref={el => {app = el}}> <div className="header"> <img className="logo" src={Logo}></img> <Nav /> </div> <body> {children} </body> </div> </> ) Obviously there shouldn't be a body tag within a body, but if I didn't do that then the "width: 100%" for each of the panels wouldn't match, and setting them to "width: 100vw" wouldn't work either. It has to be within a body tag I found. It still wouldn't fix the height issue of each element though, which was particularly strange. But I just strapped a "height: 100vh" to get it to shut up. It works up to scratch. But I don't think this should be the way things are done. It's a little strange putting a body inside a body lol, but maybe that's just me. Here's a video that demonstrates the now working code: https://www.loom.com/share/f200ff11c1f74e2281d1ca4260a8a65f
  10. Hi guys, having a little bit of trouble here with ScrollTrigger I'm trying to learn it's usage by following the tutorial for horizontal snapping sections found in the docs. Mine won't work for some reason however. I'm not sure what I'm doing wrong. I've tried to get gsap to register the ScrollTrigger plugin, and my animation is practically the same as theirs (minus the sections.length - 1 because I don't have that extra panel in the beginning. I'm not sure exactly what's going on. It's also of note that I'm trying to add this content in the midst of content already on my page. Any help would be appreciated. https://codepen.io/tonycre8/pen/bGEMyvx Edit: Please refresh, I've been working on just getting the codepen to render properly as a React component. Edit 2: It seems as if this code works on the code pen. But it will not work in actual code?? I'm not sure what's going on there. Here's a video of my code not working in an actual project. The code is identical to the one demonstrated in the codepen. CSS and everything. https://www.loom.com/share/bf002f5668034e418c9486204dbd8426
  11. Ah okay. Yeah I've added registry for the plugins now in my useEffect statement, just to make sure that's all installed for later. useEffect(() => { if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } // ... So if I was to just make a full page, would it be a good idea to store everything in the useEffect statement? I'm not entirely sure on using flags, as I just want to animate a single page, there's no way I'd trigger them unless I added an intersection observer or something like that. It seems like I'm overloading the useEffect, but at the same token I'm not sure what the point is adding flags and how I would trigger them.
  12. Hey there, I haven't no, but panels isn't actually an array here. I managed to get it working funnily enough, but not in the way I was trying to. I had to simplify by adding the scrollTrigger property onto a gsap animation, i.e. gsap.to([panel1, panel2, panel3], { duration: 1, opacity: 1, stagger: { each: .6 }, scrollTrigger: { trigger: panels, } }) And also, it seems as if in React, gsap animations don't work too well outside of the useEffect or triggers like an onClick. You can't just put it as a part of the function code it seems.
  13. Hey guys, I'm trying to use GSAP along with ReactJS, and trying to get scroll trigger to work. I have some code here: import React, {useRef, useEffect} from 'react'; import gsap from 'gsap' import ScrollTrigger from 'gsap/ScrollTrigger' export default function App() { //... let panels = useRef(null) var anim = gsap.to(panels, { y: 300, duration: 2 }) ScrollTrigger.create({ trigger: panels, animation: anim, start: "top center", end: "top 100px" }) } But I seem to constantly get errors. In fact, any time I don't put an animation in my useEffect() statement, it breaks my code completely. The error I'm getting is as follows: Does anyone know what I can do to fix this? And is there any way to get animations to work outside of the useEffect component?
  14. How typical of me, seems as if I've already solved it myself. Let me go through what I did for any other spectators: export default function App() { let app = useRef(null); let loader = useRef(null); useEffect(() => { TweenMax.to(app, 0, {css: {visibility: "visible"}}) var animPlayed = localStorage.getItem("loadingAnimPlayed"); if (!animPlayed) { console.log("Loader run"); TweenMax.from(loader, 2, { opacity: 1, onComplete: function() { localStorage.setItem("loadingAnimPlayed", true) } }) } }, []) I moved my local storage code within the useEffect hook, and then change the animation from TweenMax.to() to TweenMax.from(). This is a viable solution. I couldn't find any solution like this elsewhere on google so, I guess here it is for any unsuspecting problem hitters.
  15. Hi guys, a bit new to this gsap thing. I saw a few threads around here talking about how to use gsap for landing animations that also utilise localstorage. I have some code at the moment for this, but it seems as if gsap is breaking on the initial load, cancelling the animation entirely import React, {useRef, useEffect} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import Nav from './nav' import {TweenMax} from 'gsap' ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'); ); export default function App() { let app = useRef(null); let loader = useRef(null); var animPlayed = localStorage.getItem("loadingAnimPlayed"); console.log(animPlayed); if (!animPlayed) { // This is the localstorage animation to be run. console.log("Loader run"); TweenMax.to(loader, 1, { opacity: 1, onComplete: function() { localStorage.setItem("loadingAnimPlayed", true) } }) } useEffect(() => { TweenMax.to(app, 0, {css: {visibility: "visible"}}) }, []) return ( <> <div className="loader" ref={el => {loader = el}}></div> <div className="page" ref={el => {app = el}}> <div className="header"> <Nav /> </div> </div> </> ) } I get a series of errors on the first load, when the condition of the animation are met, the main one being: "TypeError: Cannot add property _gsap, object is not extensible" I'm not sure how to fix my code in order to get the animation to run. Any ideas?