
joris-rotteveel
ShockinglyGreen-
Posts
26 -
Joined
-
Last visited
About joris-rotteveel

Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
joris-rotteveel's Achievements
-
Rare
-
Rare
-
Rare
-
Rare
-
Rare
Recent Badges
18
Reputation
-
joris-rotteveel started following Scroll Trigger, with child position:sticky element , Draggable Infinite Carousel with Snap and Indexing , bonus.tgz file npm vs yarn and 3 others
-
Draggable Infinite Carousel with Snap and Indexing
joris-rotteveel replied to Nick.Ls's topic in GSAP
Jack, this is amazing! -
looping animation on scroll, how to add drag
joris-rotteveel replied to joris-rotteveel's topic in GSAP
Thanks, I have been struggling to understand the wrapping myself! -
looping animation on scroll, how to add drag
joris-rotteveel replied to joris-rotteveel's topic in GSAP
@OSUblake, I was wondering if you had any thoughts to share on either this thread or here: Not looking for a fully fleshed out solution, but a few pointers as how to achieve this. -
Not a question but observation. I have my bonus files as .tgz file in my repo and I reference this in my package.json : "gsap": "./utils/gsap-bonus.tgz", this should be the latest download (as of today v3.9). "npm install" results in (package-lock.json): "node_modules/gsap": { "version": "3.9.0", "resolved": "file:utils/gsap-bonus.tgz", "integrity": "sha512-8cZp2/l9gBdFzI7Dpojh8tVPRDFivowSX8N3jl42zecPv8SXdysx4GrJcwVJz4Bl/pamFZdi17s85m4Bq5/pcQ==", "license": "This package should only be used by individuals/companies with an active Club GreenSock membership. See https://greensock.com/club/. Licensing: https://greensock.com/licensing/" }, now, when I remove the node modules and package-lock files and use yarn: gsap@./utils/gsap-bonus.tgz: version "3.8.0" resolved "./utils/gsap-bonus.tgz#96ea3244b12c370e8ea3facb2ff28840a90a40a4" As you can see.....wrong integrity and wrong version number! Not sure why this is happening, but that is causing some issues until I change the hash and version manually in the yarn.lock file.
-
looping animation on scroll, how to add drag
joris-rotteveel replied to joris-rotteveel's topic in GSAP
I'll follow that thread because that is pretty much the same use-case! Excited about the new release! -
looping animation on scroll, how to add drag
joris-rotteveel replied to joris-rotteveel's topic in GSAP
@OSUblake, I have been digging a bit deeper in your helper function as I wanted the "snap" function to snap to the center of the screen. During my "debugging/understandng" of your provided solution, I got a little confused why, if the snap function returns a static number, say 40, it keeps snapping 40 pixels from the last drag position? I was expecting this to always snap to 40px. Are there any tips you could share to make the slide snap to the center (or any other arbitrary number)? I've created a fork that shows you the 40px snap being accumulated. https://codepen.io/joris-rotteveel/pen/jOYEjxz -
looping animation on scroll, how to add drag
joris-rotteveel replied to joris-rotteveel's topic in GSAP
After looking at Blake's solution, I used his approach off creating a Draggable on a "proxy" and called a custom update function on the appropriate callbacks (onDrag/onThrowUpdate). The InertiaPlugin.track gave me the current speed of the Draggable and I could use that as the input for my custom function. Thanks Blake! -
looping animation on scroll, how to add drag
joris-rotteveel replied to joris-rotteveel's topic in GSAP
Thanks Blake, I haven't seen that helper function, looks great! Will dive into it, thanks again for your help! -
Hi everyone, I have made a looping tween that can be updated via scrollwheel. Ideally I'd like to integrate a Draggable too, so on a tablet users can drag it around (scroll isn't an option). What I did (see codepen) is abstract the update into a function so hopefully I can reuse it with a Draggable integration. Unfortunately, I could use a few hints/tips on how to get a draggable integrated. (the images need to be clickable, so a Proxy is prob not going to work?) because I can't really think of any. Your help is much appreciated!
-
scroll footer over the top of main content
joris-rotteveel replied to joris-rotteveel's topic in GSAP
Thanks for that video, super helpful and that creates a simpler solution than the onUpdate approach! -
scroll footer over the top of main content
joris-rotteveel replied to joris-rotteveel's topic in GSAP
I have created another pen that does what I want. Unfortunately there are a few glitches on the codepen, prob some CSS reset issue, they are not happening on my local. Feedback is still welcome! https://codepen.io/joris-rotteveel/pen/XWaKyQN -
Hi everyone, I am trying to do something very basic, but I can't get my head around it. I have a `content` div and a `footer` div. Once the `content` div's bottom reaches the center of the screen, I'd like to pin it and have the footer scroll over the top of the content. My pen shows weird spacing between the footer and the content, and ideally it should stop scrolling when the bottom of the footer hits the bottom of the viewport. With my attempt, the footer keeps scrolling causing a white gap at the bottom. I've had a look at https://codepen.io/GreenSock/pen/KKpLdWW but that only works with 100vh sections. Any help is appreciated! Thanks
-
Scroll Trigger, with child position:sticky element
joris-rotteveel replied to deJardine's topic in GSAP
@GreenSock So the order of creation would be important here. This is definitely a great new way of dealing with it! Will look into the docs and dig a bit deeper. Thanks a million for your help. This is why I have absolutely no issues with paying for a subscription to GSAP, great product and awesome forum! -
Scroll Trigger, with child position:sticky element
joris-rotteveel replied to deJardine's topic in GSAP
@GreenSock I am trying to the same thing, but without any content between the sticky and the curtain. I've adjusted your example here, https://codepen.io/joris-rotteveel/pen/YzxXZgx. Unfortunately, the black box scrolls down when scrolling before pinning. Is this possible you think? -
Nope, that's not an issue. You can register plugins as many times as you want. No drawbacks in doing it multiple times.