rusticblonde
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by rusticblonde
-
-
54 minutes ago, mvaneijgen said:
Another user asked something similar a while back. I can't find the topic, but I have the final demo. Hope it helps and happy tweening!
Found the topic
Hi @mvaneijgen, thankyou for this. Not sure if this totally is what I needed. Basically I was moving it on the button click. So IE, if i clicked 2, 2 would show. But then 1 would need to go back to a relevant place or gap which has been left? (in my demo :D)
-
Hi there,
I am trying to do a rotating and perspective card on click. The cards are rotating, however as you can see from the demo, when the card is higher than the 1st one, the first one disappears.
I can see its obviously due to the perspective being set at -40px 40px on the function, however anyone have any ideas how i can resolve this to make sure that card 1 is included?
Thankyou in advance!See the Pen dyajmmK by rusticblonde (@rusticblonde) on CodePen
-
HI @Rodrigo, hope you are well.
See the Pen ZEVgweK by rusticblonde (@rusticblonde) on CodePen
I wondered if i could have the smallest bit of help. The last link scroll? Is literally out by maybe 2 px??? Any ideas how i can resolve this :D. Its literally not snapping i feel to the labels. It's like its overshooting on the way back up past the labels, then coming back on itself, which is obviously effecting the animation issue on the menu :S
-
Hi @mvaneijgen
See the Pen ZEVgweK by rusticblonde (@rusticblonde) on CodePen
Think i managed to get it to snap to the label + 10px to ensure it was definitely on the label to show the active menu. I also added and set the first timeline label also which appears to be now working (I am very new to this so apologies if this is a little messy).Thankyou for you help!
-
1
-
-
15 minutes ago, mvaneijgen said:
Your snapping values and the points you scroll to don't seem to over lap. You snap to "labels", so I would also scroll to the same labels in the timeline. That way your snapping doesn't suddenly take over when you try to scrollTo.
I couldn't figure out what and where your labels are and how they should work, but the bellow setup is how I would navigate to certain sections, if you also want to use snap. Hope it helps and happy tweening!
https://gsap.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()
Hey, and thanks for responding. I was just actioning like an onclick scroll to div (which is an ID) located at the top of the div. If you look at this in full mode, this doesnt happen all the time, for example I clicked the 3rd option and it worked fine. Clicked then between the 2nd and 3rd, and one overshot.
Is there any examples that you can point out that uses a scroll to label example?Thanks ❤️
-
Hi,
I am working on a stackable card (similar to SwagApp), and everything is working as intended bar the on click function to scroll to the section. Sometimes it is "overshooting" the section, and sometimes its not even scrolling to the top of the section.
I have a codepen here
Honestly, feels like I have looked at this forever, and would appreciate the guidance on how best to resolve this. (Note testing this within the forum post, doesn't look so bad, but on full screen it is awful XD)
TY
See the Pen bGOXMXX by rusticblonde (@rusticblonde) on CodePen
-
On 9/16/2023 at 11:42 AM, biswajit.mee said:
yes i can do it.
Or maybe share in the group on how this can be done? To help everyone?
-
Hi @Rodrigo, cheers for these, ill have to have a play and see if i can nail the end points better
-
Hi guys,
I am working on a demo similar to Swag App (yes, there are loads of forum threads about it, but nothing seemed to completely nail it down and i've condensed them to a somewhat working version of what I want to create).
I have done a loop over the links, and the jump between seems really off? I am pretty sure i've implemented this right ... (she says).Advice welcomed.
Basically, The active states are working between the sections, and scrolling between them also switches and toggles the link active state. However I obviously want them to be able to jump between the sections also with the links at the top
Thankyou in advance!
See the Pen XWowLJw by rusticblonde (@rusticblonde) on CodePen
-
35 minutes ago, Rodrigo said:
Hi,
Do you have a minimal demo that we can tinker with? I know that a demo that includes bundling can be a challenge but Gulp is not exactly the most up-to-date bundling system, it latest release is from 2019. Now a days most workflows use tools like Webpack, Parcel, Vite, Rollup, etc.
Maybe you could setup something in repl.it in order to check there.
Happy Tweening!
Hi Rodrigo,
Thanks for the response. Ill try get demo online. The problem is that some of my current employment legacy is still using Gulp and yet to move to VIte or Webpack
Atm, the bundler is working if i load the JS singularly and compile as I would usually do any form of JS, so i obviously have a tangible working solution until I can get this demo placed on
thankyou! -
On 10/11/2023 at 8:26 PM, GSAP Helper said:
Sorry, I'm pretty lost - is there some kind of problem you're running into and trying to solve? I'm not a Gulp guy at all. We really try to keep the questions here focused on GSAP and its API, but maybe someone else with Gulp experience can chime in. If you need UMD files, you can grab them from the /dist/ directory.
Hi,
Sorry i didnt get a notification for this post. I thought this was a forum for everything GSAP related. This is to be able compile GSAP with gulp? Are these questions not allowed? (Just so i am clear).
I thought with this being a forum for integration and asking how to best integrate into Gulp? I have the files locally, but calling them and compiling them with Gulp isnt working (I've resorted to loading the individual files into my JS folder, then compiling them with Gulp with a task runner, as that is the only way I could get them to compile, and not from the npm folder which I was looking for assistance with. Hopefully that clarifies
-
Hi guys,
I am completely new to the GSAP interface so please bare with me. I am trying to get GSAP to compile into a bundled JS file. All of my modules are obviously within folder which are obviously concatenated into a main.js, suffixed and obviously placed into a dist folder.
Would it be easier if i loaded in the JS itself within the bundler folder (IE copied the relevant js file from the node module folder) in order to build? This is my current run script which compiles obviously fine.
gulp.task('scripts', async function() {
gulp.src('assets/scripts/bundler/*', {"allowEmpty": true}) // Read from these directories.pipe(plumber({errorHandler: function(err){ // Pipe in error messages
notify.onError({
title: projectName,
message: "Error: <%= error.message %>",
"icon": path.join(__dirname + "/gulp-images/js--failed.png")
})(err);
}})).pipe(concat('main.js')) // Concatenate JS files
.pipe(rename({ suffix: '.min' })) // Rename to add '.min'
.pipe(uglify()) // Minify JS.pipe(gulp.dest('../_dist/js')) // Spit out in '../_dist/js'.pipe(notify({ // Pipe in success messages
title: projectName,
"icon": path.join(__dirname + "/gulp-images/js.png")
}));});Thankyou in advance
Rotating Cards based on click
in GSAP
Posted
Should have made it clearer @mvaneijgen, the numbers at the top (1 - 5), if you click them, the cards change