css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Just a small demo to show a few page transitions in React. Using GreenSock and SVG.

Comments

  1. Some sweet moves Sarah 💥👏

  2. OMG! So sick! I would just give up on coding 500 lines of code...

  3. Wow, that's slick, Sarah!

  4. My monitor is too wide, and the button and text are missing due to the "external" class overflow being hidden and height being 800px.

    Shrink your window width if you can't see anything to click on, peeps.

  5. @sdras This isn't working for me :/

  6. cough*vue*cough kidding.... This is really freaking amazing. Love the style of the design, and the transitions are smoooth

  7. Looks nice Sarah!

    I would suggest to use suffixes for refs, so instead of this.hero do this.heroRef or something like this. Otherwise it's becoming too easy to populate your component this. with refs, which can collide with constructor-based this properties (and I understand that this is just demo where you want to keep things short, just wanted to write about it in case if anyone else would read it and get the idea).

  8. I love it!

  9. Very very cool!

  10. @chasebank what makes you skeptical about Vue? What am I missing?

  11. Awesome! it runs really smooth.

  12. Hey Sarah, we met at React Europe, I asked you to unblock me from Twitter because we both had no idea why you blocked me. Seems like you forgot to?

    May you please unblock me? 🙏

    @FezVr4sta

  13. Absolutely beautiful! I love creative page transitions. I'm a total noob, but this is the bees knees! :D

  14. Nice one Sarah. Thank you.

  15. Hmmmm... I can only see this using Firefox for some reason.

  16. wow! awesome!!! nice job

  17. You are an absolute badass. This is awesome and thank you for sharing!!

  18. Awesome!. thanks for sharing. hope to translate the code into angular

  19. Doesn't seem to be working for me.... Chrome 63

  20. Oh nevermind I saw the previous comment of not being able to see the button... just changed my window size and it's all good now

  21. It's just amazing, I'm totally in love, but please, tell me - how can I open this project in my localhost as a React app? I want to see line by line code and learn something more about your practice, but I don't have idea what should I do, because everything I try doesn't work :(

  22. The SVG animations on the shapes are beautiful.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...