Jump to content

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


  • Posts

  • Joined

  • Last visited

battleaxe10000's Achievements

  1. Thanks @Cassie, I will look into that.
  2. Firstly, I tried to get my swiperSlider into codepen, but I didn't do very well there I'm afraid (https://codepen.io/battleaxe/pen/qBxawaz) I do, however, have a more working version i vscode (see image) This slider autoslides and uses a fade-effect. What I'm trying to do is implementing some gsap to this slider. The problem is that the animation only work on the very first slide. I have tride refs, classNames, arrays, forEach, to write each "SwiperSlide" on its own (without looping), and more. But I always get the same result. I get that gsap reccons the first slide and start the animation, but I can't seem to make it clear to gsap when a new slide enters. Some help here would be great. Thanks If you need more info, just let me know. (And of course, if you know how to get it done in codepen 👍).
  3. Thanks again Blake ❤️
  4. Thanks Blake. Yes, I know I should map through the whole shabang and just display them, but I thought this would work as well (got it from a vanilla js tutorial). The images comes from the unsplash asset in codepen, and I wasn't aware that you can even choose sizes there. I will have to look into that. Well, I'll give it a shot building it the proper way. Thanks
  5. Hi, I'm actually trying to accomplish this same thing in next.js, but I couldn't find how to write next js in codepen. The problem is that the images are not moving to where I want them, but instead an 'element.style' gets added and transform the images to the totally wrong place. It's bad in codepen, but even worse in my next js app. If I add transform: transition(0,0) !important or similar, the images get where they're supposed to be, but the animation is lost. I have tried to find a way to remove the element.style, but no luck so far. Some help here would be highly appreciated. Thanks
  6. Than you very much. I will look into that. If I can't make it work I will try with CodeSandbox.
  7. I also tried <Card key={index} {...item} ref={cardRef} /> and useEffect(() => { let targets = gsap.utils.toArray(cardRef.current); gsap.fromTo(targets, 2, { scale: 0.1, y: 40, ease: "power2.inOut" }, { scale: 1, y: 0, stagger: { from: "center", amount: 1.5 }, }); }, []) But no luck
  8. Hi, and thank you! Just an example of what I've tried. useEffect(() => { let targets = gsap.utils.toArray(".dataItem"); gsap.fromTo(targets, 2, { scale: 0.1, y: 40, ease: "power2.inOut" }, { scale: 1, y: 0, stagger: { from: "center", amount: 1.5 }, }); }, []) <ListSection className="dataItem" > {planets.map((item, index) => { return ( <Card key={index} {...item} /> ) })} </ListSection> I got the stagger from the page you linked, and just modified it a bit. Still, I can only reach the <ListSection> not each individual <Card>
  9. Hi all, I'm sorry I can't duplicate this one on codepen, but I believe it's pretty straight forward. I am getting some data via an API-call and that data is displayed as a list of cards. So far so good. I would like to animate these card with a stagger when the user enters the page from the home page (like opacity 0 to opacity 1). I have been able to animte the whole card-container (<ListSection/>), but not each card on its own. I create each card in its own component (using react): <Card> <CardHeader>{name}</CardHeader> <PSmall>population</PSmall> <CardListHeader >{numeral(population).format("0,0")}</CardListHeader> <DetailButton to={`/data/${id + 1}`}>details</DetailButton> </Card> And then I use the Card in the List-component: <ListSection> {data.map((item, index) => { return ( <Card key={index} {...item} /> ) })} </ListSection> Some help please? Thank you
  10. I thought I could share the solution I did to this, if anyone else needs it. In my Home.js: const Home = () => { const [loading, setLoading] = useState(false); window.onload = function () { gsap.to('#first', { duration: 1.3, delay: .1, top: '0', ease: 'Expo.easeInOut' }) gsap.to('#second', { duration: 1.3, delay: .3, top: '0', ease: 'Expo.easeInOut' }) gsap.to('#third', { duration: 1.3, delay: .6, top: '0', ease: 'Expo.easeInOut' }) gsap.to('#fourth', { duration: 1.3, delay: .9, top: '0', ease: 'Expo.easeInOut' }) gsap.fromTo('#innerSection', 1.3, { opacity: 0, scale: 0.2 }, { opacity: 1, scale: 1 }, 2) setLoading(true) } return ( <Section loading={loading}> <Overlays id="first" /> <Overlays id="second" /> <Overlays id="third" /> <Overlays id="fourth" /> </Section> ) } I am using Styled-Components, so in my style-file: background: ${({ loading }) => (loading ? "tranparent" : "black")};
  11. Thank you very much OSUblake 👍
  12. Hi, I'm trying to make a stagger effect on the landingpage. The idea is, that the stagger displays when the user enters the site, and then no more. The problem is when you click on a link and then get back to the landingpage. The landingpage will then reload and play the animation again (which it shouldn't). I tried with "window.onload = function(){}". This works regarding only loading once, but in regard it completely removes the wanted background (since the animation doesn't run). So, with this in mind, I should have an animation that run once, and then stays in that "after run" state. I'm thinking something like: const [hasRun, setHasRun] = useState(false); inside the onload function: setHasRun(true) But this feels a bit hacky. This is not the first time I encounter this problem, so I would really appreciate some help to solve this. Thank you very much! https://codesandbox.io/s/gsap-satgger-1usqn
  13. I was only thinking if it was a common problem with a simple solution. I'll get back to it and see if I can fix it. Thank you for your feedback.
  14. https://hopeful-almeida-c45621.netlify.app Hi, I couldn't get this to work on codepen, so on codepen is my code and in the netlify-link is how it looks like right now. If anyone can help me how to make it work on codepen it's obviously a big bonus My actual questions are: 1) How can I pin my page2 so that all the content that is scolling fits. At the moment the pin lets go a bit too soon, making me miss the last lines of text under the header "seven". 2) My image in page2 is moving downwards as I scroll, even though I've tried to pin it. Why, and how can I fix this? The goal: Is to pin the entire page2 and the image as long as the text scrolls. I might try to do something with the text to eventually, but I feel I have to get the pinning working first. Thank you very much for your time 😃