Hello Nandi! Thanks for the video. How would we make a collection of these blocks with different colors/images in a grid. I tried creating a variant with different colors bu its not displaying when i preview the site.
A code override is used to modify the functionality of an existing element on your canvas. On the other hand, a code component is a component that you can drag and drop onto your Framer canvas and use is as any other element.
Hi, very easy to use with already made code. I have a question, it is possible to use this effect for non-component element? For example a section with multiple frames and video background?
hi Nandi! I tried replicating this concept, but I am getting this error in the return function for cursor follow code: animated.div' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element. Type 'string' is not assignable to type 'Element'.(2786) (property) div: AnimatedComponent Can you help with the solution?
In a grid layout, I cannot apply this effect to all cards without the layout falling appart and the effect not working anymore. Didn't dig into the code but it looks like it involves some kind of absolute positionning that messes up everything.
Great video, Nandi. However, when I implemented this effect on the component and previewed it, the entire component disappeared after a few seconds. Do you happen to know what the issue might be? Thanks for these kinds of videos.
Hi Nandi, Im wondering why I am unable to change the image when I exit the component and back to the normal canvas? I see you have the card component on the right with the option to upload another image, I dont see this option for mine?
Hey, I have website in Framer. I am learning from here. But one I noticed is I think you should add how looks on Tablet or Mobile mode or how much time to load if use these types of elements with 3d effects? Because I used 3d effects first time but the site didn't load smoothly when I scroll I removed all the 3d effects or wasted more time to remove individually. @framer
Framer is also known for great effects. I attracted from this features but the thing is I can not use them because website didn't scroll smoothly, is the reason I use SVG images (Thumbnails)? Or any?
I see that you put the pointer event to none. But what if I want a pointer event on a card? (like an info icon in the top right of this card or a CTA) I would like the spotlight to still remain but it always disappears when I hover over a potential pointer event. Do you have any solutions for that?
Hi! I have an issue with this, whenever I link this button to a certain page of url, the button tag of the accessibility just disappears. How can I maintain the button tag even if I link this component to other pages?
Not sure. I use Framer. But yeah, in Framer you can do this without any code. This is an older video. With the latest updates, you have the ability to do any 3D animation in Framer.
Great video Nandi! However, with Safari the behavior is not good, it looks strange. Your demo as well. Do you think this can be fixed or is it due to Safari? On Chrome it works great.
No matter where I go for tutorials, I always find Nandy. You're awesome man ✌🏻
Thanks man ✌️
Hi Nandi, Really love all the content you created! Looking forward to seeing more of your updates!
Thank you so much!
More to come :)
It work well with any color. With black backgrounk is more easy to see this effect or we have the same result with any colors
Good to see you again!
thanks, mate! Weekly uploads are coming back :)
Great video Nandi! I'm gonna implement this to my website 🤩
Thanks! :)
Go for it!
Hello Nandi! Thanks for the video. How would we make a collection of these blocks with different colors/images in a grid. I tried creating a variant with different colors bu its not displaying when i preview the site.
More videos plz with code override and custom component. What's the differences between them?
A code override is used to modify the functionality of an existing element on your canvas. On the other hand, a code component is a component that you can drag and drop onto your Framer canvas and use is as any other element.
Hi, very easy to use with already made code. I have a question, it is possible to use this effect for non-component element? For example a section with multiple frames and video background?
Yes you can apply this to any frame or element if you follow the steps carefully:)
hi Nandi! I tried replicating this concept, but I am getting this error in the return function for cursor follow code: animated.div' cannot be used as a JSX component.
Its return type 'ReactNode' is not a valid JSX element.
Type 'string' is not assignable to type 'Element'.(2786)
(property) div: AnimatedComponent
Can you help with the solution?
Samer error here. You found a solution?
In a grid layout, I cannot apply this effect to all cards without the layout falling appart and the effect not working anymore. Didn't dig into the code but it looks like it involves some kind of absolute positionning that messes up everything.
Great video, Nandi. However, when I implemented this effect on the component and previewed it, the entire component disappeared after a few seconds. Do you happen to know what the issue might be? Thanks for these kinds of videos.
Thanks!
I don’t know what’s the issue. Please send a remix link.
how can i add a slower and smoother scroll. I have used speed animation for the whole project and everything brakes down.
Hi Nandi, Im wondering why I am unable to change the image when I exit the component and back to the normal canvas? I see you have the card component on the right with the option to upload another image, I dont see this option for mine?
Hey, I have website in Framer. I am learning from here. But one I noticed is I think you should add how looks on Tablet or Mobile mode or how much time to load if use these types of elements with 3d effects?
Because I used 3d effects first time but the site didn't load smoothly when I scroll I removed all the 3d effects or wasted more time to remove individually. @framer
Which libs we can use like framer motion, what about just css animation?
Framer is also known for great effects. I attracted from this features but the thing is I can not use them because website didn't scroll smoothly, is the reason I use SVG images (Thumbnails)? Or any?
I see that you put the pointer event to none. But what if I want a pointer event on a card? (like an info icon in the top right of this card or a CTA) I would like the spotlight to still remain but it always disappears when I hover over a potential pointer event. Do you have any solutions for that?
Hi! I have an issue with this, whenever I link this button to a certain page of url, the button tag of the accessibility just disappears. How can I maintain the button tag even if I link this component to other pages?
Good question!
Watch my latest video. It has a more flexible component that you can use to make this effect and also add link to the card.
Can't I do this on Webflow without code?
Not sure. I use Framer. But yeah, in Framer you can do this without any code. This is an older video.
With the latest updates, you have the ability to do any 3D animation in Framer.
Great video Nandi! However, with Safari the behavior is not good, it looks strange. Your demo as well. Do you think this can be fixed or is it due to Safari? On Chrome it works great.
Thank you so much!
For me it looks great in Safari. Interesting.
Well done
thank you! :)
How can I share or copy style guide like colors, shadows from one to other projects?
you cannot copy and paste color styles to other projects unfortunately. You can right click and copy shadows tho.
@framer.university copy paste from one project to another?
Does anybody know how to use Framer discount coupon for annual subscription?
Bro when you’re launching your framer course
Hey! It is launching next year!
Does not work on Mobile or Firefox. This is great but needs adjustments to try and make it more accessible across devices.
I am Indian my english is not good so i can not full feel this chanell