Jump to content

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

Daniel Hult

  • Posts

  • Joined

  • Last visited

Everything posted by Daniel Hult

  1. Ah, perfect! That solved my problem as well! Thank you 😄
  2. Hi guys, Im trying to achieve the layered pin effect with scrolltrigger, similar to the demos here: https://codepen.io/GreenSock/pen/KKpLdWW Im just trying to add one section in between that is pinned WITH pinSpacing enabled. After the animation is done on that pinned section, I want the next section to overlap that section just like these demos. Does that make sense? In my codepen here, after the logo animation is finished, I want the section below to overlap the finished logo section, and then pin that section with pinspacing. So: 1. Animate logo/svg with normal pinSpacing 2. Once it is finished, the next section overlaps 3. When the overlapping section reaches the top of the viewport, it will be pinned with pinspacing Is that possible? 😊
  3. Hi guys, I actually just figured out the solution after some hours trying to figure out what was causing the problem. Wanted to write a topic here in case anybody else has this issue, or if it's relevant to the Greensock team: When you run Laravel Mix (a webpack wrapper) in production mode it treeshakes (I think) plugins from gsap, even if you registered the plugin: import { gsap } from 'gsap'; import Scrolltrigger from 'gsap/ScrollTrigger'; gsap.registerPlugin(Scrolltrigger); //animation code It works fine in development mode. The solution is to add this setting in the "terserOptions" in the webpack.mix.js file: .options({ terser: { terserOptions: { keep_fnames: true, }, }, }) Hope this helps somebody some day 😊
  4. Hey guys, This is a long shot - but I've found some threads in these forums that have helped me before, so Im trying again! Im trying to do a simple animation like the one in the video, but in an endless loop. The top element fades out, and a new one fades in at the bottom. I also need to place the top element last in the array of elements after it's faded out, so it will be an endless loop. Have you ever answered/seen something like this in the forum? Or if anybody would kindly guide me in the right direction, it would be highly appreciated. I can get it to kind of work, but I get a sudden jump when Im appending the element, so I've been stuck for a while trying to figure out the best solution. animation.mp4
  5. Ah, I see! Makes sense since the image is already inside the inner container. Thank you for the reply @tailbreezy 😄
  6. Yes, I want it to go from the state that it's in currently in the codepen (image is positioned absolute in an outer container) and then move/place the image inside an inner container where it would also be positioned absolute. If you uncomment this line in the codepen: //hero.appendChild(image); Then you'll see what I want for the final state. Does that make sense?
  7. Hey guys, Trying out the FLIP plugin on a project and having some issues figuring out what to do. In the codepen here there is just one active function that handles the FLIP animation and I've commented out my DOM structure change so you can see what the initial state should be. So in this example I want to go from a fullwidth image and then position/scale it to the hero container. Im using absolute positioning so it changes it's anchor point. Is this possible?
  8. Yes, that was indeed the issue. I had to change my import logic to have all the timelines available, and then use them accordingly like you said. Thank you for the reply!
  9. Hey, Im making a slideshow with Flickity and animate each slide with gsap. The gsap code is in modules, so I export a timeline from each module like so: export const tl = gsap.timeline({ paused: true, }); tl.to('.some-element', { opacity: 1 }) Then importing them like so and storing them in an array: const one = () => import('./timelines/one'); const two = () => import('./timelines/two'); const three = () => import('./timelines/three'); //..... const modules = [one, two, three, four, five, six, seven, eight, nine, ten]; And then in the flickity slideshow I've used their "change" callback to run the correct timeline when I change slide. Left a comment in the code below to show where Im confused about it not working. change: () => { if (index >= modules.length) { index = 0; } modules[index]().then((module) => { if (module.default) return module.default(); //If I console log something, it console.logs everytime, so it is running //Why isn't this setting the progress to 0 and starting again? module.tl.progress(0).play(); }); index++; }, Im expecting to go from e.g slide1 to slide2, then if I go back to slide1 - the timeline should play again from the beginning. I want that for each slide. See live site here: https://akershusenergi.netlify.app/ (Just click on the page and use left/right arrow keys to trigger change callback) Am I doing something wrong?
  10. This is how I used plugins in nuxt to include Splitting.js in one of my projects. Should be the same for gsap. Try to change this code to relevant gsap code and you should be fine. /plugins/splitting.js let Splitting; if (process.client) { require('splitting/dist/splitting.css'); require('splitting/dist/splitting-cells.css'); Splitting = require('splitting'); } export default Splitting;
  11. Hi! Is it possible to treeshake things from the core that you dont use? Like utility functions and eases e.g.
  12. Ahhh, it's so simple when I see it. Very helpful! Thanks
  13. Hey, Im trying to animate the background color of the whole container smoothly as you scroll. So im trying to make it go like this: Initial color is set on the container, as soon as you start to scroll horizontally the first background color should start animating and stop halfway, then animate to the next color until the end of the container. Im seeing some issues with flickering on the background and not a smooth transition. I know my code is not very performant at the moment either (I guess). Would greatly appreciate some help on how to structure the code to keep it more maintainable. Im guessing making a scrolltrigger to each separate .to is not very performant either
  14. If you open that pen in full screen mode the offset is more noticeable. This is whats been happening to me since im working in the browser and not codepen
  15. Thank you! Makes sense when I see your code. One issues with this is if you have a section above it. You can see it starts too soon: https://codepen.io/daniel-hult/full/QWNZxYY Maybe I can try to make an svg for the whole width like you said instead and just plug it in the whole timeline for the full offset.
  16. Hey guys Im trying to make a horizontal scrolling section and have some svg paths drawn as you scroll. My problem is that I don't know how to set the start/end times for the DrawSVGPlugin. At the moment they start at 0 (which makes each one of them start at the same time), so when I have scrolled to the second svg, it's already finished drawing the path. Is it possible to set a left value as a start in scrollTrigger somehow? As in "start when this elements left side is in view"? I've seen some threads on here about animating children in horizontal scroll section, but I couldn't figure out what to set the values to anyway.. Im trying to make something similar to this (as in the horizontal section here): https://www.happymaven.co.uk/
  17. Hey (again ) guys, I haven't worked with svg's much, and Im trying to animate the svg paths here as you scroll.. I want to physically scroll down, and translate the svg to the left and animate the icons as they come into view. I thought this was what horizontal scroll was for in ScrollTrigger? Any tips people also have regarding setting up the svg's are also very welcome. I've read through some of the examples on motiontricks.com, which has been very helpful - but didn't see any examples with a horizontal svg.
  18. Wow, each time I post in this forum I learn something super useful.. Works wonderful! Many thanks
  19. Hey guys, Im trying to animate some vertices positions in Three JS with GSAP and not sure how to setup the GSAP part. Demo code (doesn't work): gsap.to(this.geometry.attributes.position, { array: geometry2.attributes.position.array }); This DOES work (this is what I need to do in GSAP over a set duration): this.geometry.attributes.position.array = geometry2.attributes.position.array; The relevant code in codepen starts on line 165
  20. Yeah, I've come to realize after using gsap for a while.. that it's quite big (in terms of functionality) I sometimes just look through the documentation and find something that I've wondered how to achieve about before. Thanks for the replies guys - very helpful as always
  21. Thanks for the reply! I made this example very reduced because I was just trying to make it easier for you to debug - but I might have a solution anyway with your code Just curious about one more thing. Why do you use this: gsap.utils.toArray('.slide'); I see it in the forums here a lot but never understand why when you can do e.g [...document.querySelectorAll('.something')] or Array.from(....)
  22. Hi guys, Im making kind of a slideshow and have some logic between the slides with GSAP, but having some issues thinking logically.. In the codepen you can see at the bottom that I call the function 3 times manually. I want it to repeat endlessly and loop through the slides. Was trying to do some callback functions on the onComplete and onRepeat, but I think I might just be thinking too hard. Just trying to make the number fade down, then the next one fade up and so on (and then go back to start if it hits the end of the loop). Btw: Im still a club greensock member, just not on this account (I use the other one for work)
  23. So e.g if you move the mouse above the text, the background text will move up, left it will go left and so on..
  24. Hey, It's the effect on this site here (just move your mouse around): https://danielebuffa.me/work Basically just want the duplicate element to move around the original text, but be clamped to max 20px in each direction. Does that make sense?
  25. Hey guys, Hope someone here can help me with a small issue Im having. I want to create an effect where you copy an html element in JS and make that "move around" the original element on mousemove over the original element. Also want to clamp the number it can go in each direction by e.g 20px or something.. I've tried to use gsap's utils clamp function, but I don't couldn't get it working properly. In the codepen at the moment I have the effect working in just one direction (just positive values) without any clamping logic. Anybody that can help me out?