Jump to content

Daniel Hult

  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

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

Daniel Hult's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges



  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.