Jump to content
Search Community

pixelbakery

Members

  • Posts

    17

  • Joined

  • Last visited

Recent Profile Visitors

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

pixelbakery's Achievements

  • Collaborator Rare
  • Dedicated Rare
  • Reacting Well Rare
  • First Post Rare
  • Conversation Starter Rare

Recent Badges

2

Reputation

  1. pixelbakery
    @OSUblake I thought you might be interested in the final result: https://pixelbakery.com/about Thank you again for all your help, I couldn't have done it without you.
  2. pixelbakery
    Yup =] Hamburger never moves. I have it rotating right now just for testing. The three rectangles that say 'what we make', 'who we are', and 'start a project' should hide at 50% of the screen's height is scrolled and then come back into view when scrolling back up and to 50% of the screen height. so the former- the top of the page. Does that make sense at all? Here's our production website if you want to see it in action: https://pixelbakery.netlify.app I know it kind of seems like it's working correctly on there, but it's severely buggy and not built with react in mind at all.
  3. pixelbakery
    @OSUblake Just pinging you again with this update since I posted it over the weekend, whenever you have a free moment to get around to it
  4. pixelbakery
    @OSUblake Here you go! Just to clarify, I have three goals I'm trying to accomplish. 1. Have all of the elements stagger in from autoAlpha:0 from above the top of the screen 2. When a user scrolls partially down the page, trigger an animation that hides the three box elements by sending the back past the top of the page with an autoAlpha: 0 again. I was hoping that this would simply be triggered by the scroll position instead of having it animate as you scroll. 3. Hamburger nav (which I have working hooray) https://codepen.io/pixelbakery/pen/bGYxRNj
  5. pixelbakery
    @akapowl Hi again, a few things - What if someone loads the page with an anchor link that's on some section further down the page? - How would I handle an initial animation that fires once when the page loads? - I'm struggling to move this over to react. Any suggestions? Here's my code as of right now: import gsap from 'gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' import { useEffect, useRef } from 'react' function Navbar() { let box1 = useRef(null) let box2 = useRef(null) // Initial Load useEffect(() => { gsap.set([box1, box2], { y: -64, }) gsap.to([box1, box2], 0.8, { delay: 0.8, ease: 'power3.out', y: 0, autoAlpha: 1, stagger: { amount: 0.15, }, }) }, [box1, box2]) // // Scroll Downwards useEffect(() => { gsap.to([box1, box2], 0.8, { scale: 2, ease: 'none', scrollTrigger: { trigger: 'body', // technically not neccessary - when you don't pin anything, the body will be the default start: 0, end: () => innerHeight / 2, scrub: true, markers: true, }, }) }, [box1, box2]) return ( <div ref={(el) => (box1 = el)} className='fixed top-0 left-0 w-32 h-32 bg-peach z-50 opacity-0 ' > <p>asdff</p> </div> <div ref={(el) => (box2 = el)} className='fixed top-0 right-0 w-32 h-32 bg-peach z-50 opacity-0 ' > <p>asdf</p> </div> </> ) } export default Navbar
  6. pixelbakery
    This is great. Thank you!
  7. pixelbakery
    Hiya, I tried searching around but couldn't find anything, so forgive me if this is a repeat question. I have a fixed nav bar at the top of my site that I want to animate in on the initial page load (I think I have this part under control). When the user scrolls I want parts of it to animate out and disappear once they've moved downwards 50% of the total screen height. It's not wrapped in a 100vh container because obviously it's a nav, and all of the first sections have different heights so I can't base it off of that. What's the best approach for this? Create a dummy element with a super negative z-index? I thought the answer was `document.body`, but then I realized that makes no sense because the body is super long. I'm using reactjs. No jQuery in this household =] Thanks
  8. pixelbakery
    @OSUblake The first demo looks pretty spot on! I believe all I would need to do is remove the random size portion to use the actual svg size, correct? And obviously remove the looping animation. I'm guessing I could just add two more variables to each object for x and y, right?
  9. pixelbakery
    Hiya, I'm trying to find out what the best approach to this is. I'd like to create a lander that has a bunch of svgs that spawn in random locations, but don't overlap, on page load. Once they're loaded in, they'll passively bob up and down and rotate a bit. Is this possible with GSAP, or should I keep looking? I potentially like the idea of using the 2d physics plugin to make them bump off each other, but that's deff phase two. I've attached a screenshot of the mockups to give you a better idea of what I'm after. The object in the middle has a blue roughly-cut background baked into the image and would be placed on top of everything, so no need to add collision avoidance to that part. Ya'll are great! Thanks
  10. pixelbakery
    Boom. Nailed it. The culprit was in trying to pass a variable to the initial y height of the timeline. I fixed this by creating the following string and passing that instead: const yheight = "+=" + totalHeight*-1 I think a lot of other people will find this useful, so I'm going to fork my pen from here so others can reference it. Can you double check my work really fast though to make sure everything is clean and done correctly?
  11. pixelbakery
    Wait, I think I might have fixed it. Hold off on helping me
  12. pixelbakery
    hmmmm... I still can't figure out what i'm doing wrong. Thank you for your help so far. This community is amazing. StackOverflow would have ripped me to shreds by now. https://codepen.io/pixelbakery/pen/JjJgvZL
  13. pixelbakery
    Okay so this is where I'm at: https://codepen.io/pixelbakery/pen/JjJgvZL?editors=1111 (I'm using Tailwind for the css, but that shouldn't be too important) Known variables: - The height of each box will always be 24px. - The max height of the box column will be 144px. - The min height of the box column will be 24px. Unknown Variables: - The number of boxes - The actual height of the box column while within the bounds of 24 to 144. I have two goals: 1. have the wrap respond dynamically since I don't know how many boxes will be within it. 2. Make sure the number of boxes stays the same, but show less of them at once on smaller screens. i.e a phone should only have 3 boxes visible in the column at a time whereas a large screen could fit up to 6. Where am I going wrong? Let me know if that example is not simple enough - I tried to cut out a lot of the bloat. edit: I left overflow visible for debugging
  14. pixelbakery
    Okay, next question. How do I make the height responsive? Obviously I know how to stretch the box responsively, but I'm not certain on how to get GSAP to respond accordingly.
  15. pixelbakery
    Yes!! Thank you so much!
×
×
  • Create New...