Creating zooming scroll effects like Apple.com in Framer without code

แชร์
ฝัง
  • เผยแพร่เมื่อ 3 ธ.ค. 2024

ความคิดเห็น • 66

  • @dandenney3046
    @dandenney3046 ปีที่แล้ว +12

    Awesome walkthrough, I could watch these all day, but I guess I should try making something with it instead :)

  • @FilipeSantos-jw6og
    @FilipeSantos-jw6og 11 หลายเดือนก่อน +2

    Scorsese just called me and said that this is absolute cinema. No puns intended.

  • @kylehumber
    @kylehumber ปีที่แล้ว +11

    great tutorial! awesome to see what we can do with Framer 😁

    • @Framer
      @Framer  ปีที่แล้ว +1

      More to come!

  • @yi8634
    @yi8634 ปีที่แล้ว +4

    This is amazing!! Keep this up!! I love this type of videos

    • @Framer
      @Framer  ปีที่แล้ว

      Thank you! Will do!

    • @SALMANALI-yl6lb
      @SALMANALI-yl6lb 9 หลายเดือนก่อน

      @@Framer Hey can you please guide us for tablet and mobile also 😊

  • @graphic-nations
    @graphic-nations ปีที่แล้ว +3

    Amazing, i love Framer

  • @philstardesign3123
    @philstardesign3123 ปีที่แล้ว +5

    Great stuff!

    • @Framer
      @Framer  ปีที่แล้ว +1

      Thanks!

  • @vegge
    @vegge 5 หลายเดือนก่อน

    Pretty awesome demo!!

  • @kishorekumarseenivasan
    @kishorekumarseenivasan 5 หลายเดือนก่อน

    i love framer man

  • @dnm.design
    @dnm.design 10 หลายเดือนก่อน

    This is Sooooooo Good! What about the videos any suggestions? such us dimensions, quality, duration, fps, etc? how do you display all those examples?

  • @elysiumcore
    @elysiumcore ปีที่แล้ว +1

    Easy??? ok im sold...Go on
    < Taking notes 😂

  • @雪鷹魚英語培訓的領航
    @雪鷹魚英語培訓的領航 ปีที่แล้ว +1

    Wow! Very cool.

  • @des7638
    @des7638 10 หลายเดือนก่อน

    Insanely cool

  • @GrecoFPV
    @GrecoFPV ปีที่แล้ว

    great software to head track the facecam btw

  • @gg-vm1oh
    @gg-vm1oh 4 หลายเดือนก่อน

    Very cool! 🤩
    Thank you very much!
    Of course, it would be nice if it were responsive. 🙂

  • @andrejt9606
    @andrejt9606 ปีที่แล้ว +4

    Hey guys! Great tutorial, I followed it step by step and my site doesn't work like this. When I scroll the slideshow scrolls with it, it doesn't stay in the middle of the screen like on the tutorial. I made the whole thing 3 times and it happens every time, could someone tell me what I can do?

    • @abhidadhaniya5701
      @abhidadhaniya5701 ปีที่แล้ว +6

      I found a perfect solution for it where every parent layer should overflow property set to visible and set slideshow container overflow property to hidden. Thank me later :)

    • @brandvst
      @brandvst ปีที่แล้ว +2

      It's the same thing with me, I think there is something he didn't show us with the scroll section that he made before the toturial.

    • @abhidadhaniya5701
      @abhidadhaniya5701 ปีที่แล้ว

      @@brandvst check above mentioned steps by me..

    • @chickenkombo
      @chickenkombo ปีที่แล้ว +1

      Make sure your page is set to overflow visible

    • @sjaakgrootspraak
      @sjaakgrootspraak 19 วันที่ผ่านมา +1

      @@abhidadhaniya5701 Thanks! Worked perfectly!

  • @jenniferlang5399
    @jenniferlang5399 2 หลายเดือนก่อน

    Is it possible to customize the GAP in the Ticker so it's not the same for every slide?

  • @lukaslau465
    @lukaslau465 11 หลายเดือนก่อน +1

    this is awesome! Quick question: the video slider doesn't work very well on Safari. on chrome it's awesome. but on safari it just stays black. went to the Apple Store, same issue on all devices. any idea how I can fix that? already tried reducing file sizes, even tried mp4 and mov - doesn't work reliably. would be awesome to get a helping hand here :)

    • @mczreo
      @mczreo 9 หลายเดือนก่อน +1

      Probably has to do with restrictions that are set in the safari settings for privacy. Not sure if there is something to do about that

  • @fabienmoutier2668
    @fabienmoutier2668 6 วันที่ผ่านมา

    Hello Guys. Great effect but unfortunatly my frame refuses to be on the top of the section. i tried the sticky parameter, took care that all parents layers are on Visible Overflow... but I still have this frame center in my scroll section and not on the top of it. Anyone have an idea ? Best

  • @abhidadhaniya5701
    @abhidadhaniya5701 ปีที่แล้ว +1

    Thank you so much for this tutorial.. Very Helpful...
    and there's one problem with sticky position of presentation slider and here's the solution
    I found a perfect solution for it where every parent layer should overflow property set to visible and set slideshow container overflow property to hidden. Thank me later :)

    • @foresmind
      @foresmind ปีที่แล้ว +1

      not later, I'm thanking you NOW it's fixed now... i though it was a bug or something THANK YOU

    • @abhidadhaniya5701
      @abhidadhaniya5701 ปีที่แล้ว

      @@foresmind Enjoy framer 😊🚀

    • @ericcontreras839
      @ericcontreras839 ปีที่แล้ว +1

      what a g
      spent an hour trying to figure it out till I saw ur comment

    • @rarabusiness
      @rarabusiness ปีที่แล้ว +1

      yeap, spent 30 min trying to figure it out, this was it, thanks

    • @rarabusiness
      @rarabusiness ปีที่แล้ว

      Now I have a different issue, I see it´s sticky but when I add an image, it doesn´t show anything

  • @ericcontreras839
    @ericcontreras839 ปีที่แล้ว

    Awesome loved it! However very thing is working fine for me except the transition effect when I click to the next slide is instant even though I edited it to make it more smooth, however doesn't seem to work. Can any1 help me out

  • @prateekminhas6665
    @prateekminhas6665 ปีที่แล้ว +1

    i really want to know is there a way we can export our react code from framer to vs code?

  • @ElishevaSpitzer
    @ElishevaSpitzer ปีที่แล้ว

    This is amazing!
    but I have a big problem I set the clipping overflow to show in the slider that I will be able to see all videos but then the whole site doesn't fill my screen and I could scroll horizontal a lot
    Can someone help me please?

  • @RadhikaMangtani
    @RadhikaMangtani หลายเดือนก่อน

    Why stickey option is not applicable initially

  • @s.sandeep8017
    @s.sandeep8017 2 หลายเดือนก่อน

    and what about other breakpoints? tablet and mobile?

  • @EvanLaulom
    @EvanLaulom ปีที่แล้ว

    Hi, what microphone do you use please ? Amazing as always ! Thanks

    • @Framer
      @Framer  ปีที่แล้ว +2

      Yeti X

  • @fortuneinpalm
    @fortuneinpalm ปีที่แล้ว

    Can you tell me how to add a stroke effect to the text and how to overlap the sections?

  • @michaelezekiel7211
    @michaelezekiel7211 10 หลายเดือนก่อน

    Where can I get these kind of videos

  • @pelport
    @pelport ปีที่แล้ว

    Hello!! Was hoping someone could help. I have some video set to autoplay in my Framer Website and I'm going nuts trying to figue out how to set the videos to start playing only when they appear in the viewport as you get to them in the scroll. Any help much appreciated!!

  • @SALMANALI-yl6lb
    @SALMANALI-yl6lb 9 หลายเดือนก่อน

    @Framer Hey actually when i scroll down my page its goes outside of the page does't look any thing can you please guide me !

    • @namthuan0412
      @namthuan0412 7 หลายเดือนก่อน

      set overflow of desktop and "scroll section" to visible, because the sticky property use on "Slideshow container" only work if 2 parents overflow are visible

  • @bySterling
    @bySterling ปีที่แล้ว

    SO beautifully Awesome! Do you sell this layout?$

    • @Framer
      @Framer  ปีที่แล้ว

      You can find a free remix project in the description

  • @Abdullah-ve2yc
    @Abdullah-ve2yc ปีที่แล้ว

    i dont really understand the "c=video-section" part. Is that a frame we are selecting? I've been seeing it in a few videos but i dont fully get how it works yet.

    • @MrFACTS-mk1ib
      @MrFACTS-mk1ib ปีที่แล้ว

      we are just adding a label to a specific section and then saying the animation to work only what that specific section appears on screen etc

  • @StevenVillarino
    @StevenVillarino ปีที่แล้ว +1

  • @zeezerbez
    @zeezerbez 4 หลายเดือนก่อน +3

    All the space on the screen, yet bro gave us a minor (-18) face cam

    • @Framer
      @Framer  4 หลายเดือนก่อน +1

      I can definitely make my face bigger next time

  • @joansarsa
    @joansarsa ปีที่แล้ว

    Do you guys notice that the sliders doesnt work on windows? Maybe it's just me, but have you tried to see how it looks on Windows+Chrome? To me, the sliders are always static.

    • @abhidadhaniya5701
      @abhidadhaniya5701 ปีที่แล้ว +1

      I found a perfect solution for it where every parent layer should overflow property set to visible and set slideshow container overflow property to hidden. Thank me later :)

  • @OnSiteTvee
    @OnSiteTvee ปีที่แล้ว

    How do I gain traction to my website?

    • @clausein
      @clausein ปีที่แล้ว +2

      Do you genuinely believe this is the right place to find an answer to this question?

    • @OnSiteTvee
      @OnSiteTvee ปีที่แล้ว +1

      @@clausein I was planning on emailing them once I got off work, I actually wanted to talk about the plans that they have, but then I saw that they posted a video. So I thought they might’ve answered.
      Perhaps I should’ve worded my question better.

  • @vinyts3
    @vinyts3 ปีที่แล้ว

    It keeping get bug to me, sticky isn't working

    • @Framer
      @Framer  ปีที่แล้ว +3

      Make sure your page is set to overflow visible

    • @vinyts3
      @vinyts3 ปีที่แล้ว

      @@Framer yep that's fixed! Thanks!!!

  • @julianTrichardson
    @julianTrichardson ปีที่แล้ว

    bro ....