Jump to content

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


  • Posts

  • Joined

  • Last visited

battleaxe10000's Achievements

  1. Than you very much. I will look into that. If I can't make it work I will try with CodeSandbox.
  2. 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
  3. 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>
  4. 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
  5. 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")};
  6. Thank you very much OSUblake 👍
  7. 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
  8. 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.
  9. 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 😃
  10. Hi, I'm new here and I hope I do this correct 😬 In my codepen I think you can see what I'm trying to do. The page scrolls vertically until it gets to the projects-section where the pages starts scrolling horizontally until the last contact-section. Now, everything works, but I'm not happy with the result. 1. When you scroll down, and leave the last project, the page kind of takes a "shortcut" down to the contact part. In reverse the same happens when you leave "projects" and enters "about". I believe this has to do with the scrub-function(?), but is there a way to get around this? 2. The horizontal part scrolls smooth, but too fast I think. Help please. 3. As mentioned, the horizontal part scrolls smooth, but not the vertical. Can I wrap the whole thing in another scrollTrigger and add a scrub, or is there a better way to get smooth scrolling through the whole page? I know it was a lot, but if I just could get a hint on at least one question I would be super thankful. Cheers