Framer

framer

is a library that powers animations in , and it’s now available as an independent package that we can use in React applications. It has a very simple declarative API that makes it easy to create and orchestrate complex animations with the minimal amount of code. In this article, we’ll start with very basic animations and gradually move to the more advanced ones. Framer-motion Framer Note: animation examples in the article may not look smooth because of a low frame rate of GIF images. Rest assured, real animation are butter-smooth . You can play with them in the sandbox here . Setup We can start with framer-motion by simply installing it with command. yarn add framer-motion To animate elements, we’ll need to ditch primitive HTML elements ( , , , etc.) in favor of their “motion-infused” counterparts - , , , etc. These elements expose the properties that we’ll need to add our animations. div span path motion.div motion.span motion.path Get things moving To create the simplest animation, we can specify property that accepts an object with CSS properties that we want to animate. This is how we can animate opacity and background color of the : animate div { motion } ; One = (
  <motion.div
    className= animate={{
      opacity: ,
      background: }}
  />
); import from "framer-motion" const => () "rectangle" 0.5 "#ff00b1" The properties that we pass to represent the of the animation. Framer-motion will infer the initial state based on the specified CSS properties, or their defaults. For example, default opacity for CSS elements is (even if we don’t set it explicitly), so framer-motion knows how to animate it down to . animate final state 1 0.5 We can also set the initial values of animatable CSS properties using prop. It also accepts an object with CSS properties that will tell framer-motion what initial values should be like. In the example below, we fade in the rectangle by animating and properties: initial y opacity Two = (
  <motion.div
    className= initial={{
      opacity: ,
      y: }}
    animate={{
      opacity: ,
      y: }}
  />
); const => () "rectangle" 0 50 1 0 It’s worth mentioning that property is special - it’s not a real CSS property, but framer-motion understands it. There are a bunch of CSS -related properties that have shortcuts in framer-motion, so when we change property, we actually apply animation to property. Similarly, there are , , , and some other properties, you can find the complete list . y transform y transform: translateY() scale rotate scaleX scaleY here Animating state changes The animations that we’ve done so far only run when components mount. Now let’s see how we can animate elements when some internal state changes. We can set property to different values based on the internal state, and framer-motion will animate between those values when the state changes: animation Three = { [active, setActive] = React.useState( ); (
    <motion.div
      className= animate={
        active
          ? { background: , rotate: }
          : { background: , rotate: }
      }
      onClick={ setActive(!active)}
    >
      Click me!
    < const => () const false return "rectangle" "#ff00b1" 90 "#0D00FF" 0 => () /motion.div>
  );
}; Note that the component re-renders only when state changes, and not on every animation frame, which makes animations very efficient. Variants The real power of framer-motion comes from using . Let’s start by exploring how we can rewrite the previous example to use variants. variants We’ll begin by extracting inline definition of animatable properties from prop into a separate object. This object will contain key-value pairs, where keys are some meaningful names that we give to our animatable properties, and values are the properties themselves. Then we can pass this object to variants prop, and inside we can toggle animations based on the string names we gave to them: animate variants animation Four = { [active, setActive] = React.useState( ); rectangle: Variants = {
    active: { background: , rotate: },
    disabled: { background: , rotate: }
  }; (
    <motion.div
      className= variants={rectangle}
      animate={active ? : }
      onClick={ setActive(!active)}
    >
      Click me!
    < const => () const false const "#ff00b1" 90 "#0D00FF" 0 return "rectangle" "active" "disabled" => () /motion.div>
  );
}; This example works, but it’s not very useful. The power of variants is in orchestrating complex animations throughout a component tree, and to see that, we’ll need a slightly bigger example. In the example below, we have a container that has three child s inside of it. Container uses the same animation that we’ve seen before: div div div onClick Five = { container: Variants = {
    active: {
      background: },
    disabled: {
      background: }
  }; [active, setActive] = React.useState( ); (
    <motion.div
      variants={container}
      animate={active ? : }
      onClick={ setActive(!active)}
      className= >
      {[ , , ].map( (
        <div key={value} className= />
      ))}
    < const => () const "#ff00b1" "#0D00FF" const false return "active" "disabled" => () "container" 0 1 2 => value "box" /motion.div>
  );
}; Now we can animate children elements simultaneously with the parent by setting their own variants object. If the descriptive names of child animations match those of the parent, child animations will be triggered when parent animation is triggered. Notice how both and variants have the same keys and : container box active disabled Six = () => { container: Variants = {
    active: { : ,
    },
    disabled: { : }
  }; : Variants = {
    active: { : ,
      opacity: },
    disabled: { : ,
      opacity: }
  }; [active, setActive] = React.useState( ); (
    <motion.div
      variants={container}
      animate={active ? : }
      onClick={() => setActive(!active)}
      className= >
      {[ , , ]. (value => (
        <motion.div ={value} className= variants={ } />
      ))}
    </motion.div>
  );
}; const const background "#ff00b1" background "#0D00FF" const box rotate 90 1 rotate 0 0.7 const false return "active" "disabled" "container" 0 1 2 map key "box" box Configuring variants Variants also allow us to orchestrate the child animations. We can do that by providing property inside the animation object. transition For example, we can set children property, which specifies the delay in seconds between child animations: staggerChildren const container: Variants = { { , { }
  }, { }
}; active: background: "#ff00b1" transition: staggerChildren: 0.5 disabled: background: "#0D00FF" Note how transition is applied only when we transition . Since we defined property inside variant, the stagger animation is only applied when we transition from , but not when we transition from to . into a given variant transition active disabled into active active disabled By default, variants start animating parent element and its children at the same time. We can control that behavior using property. We can set it to to make parent element animate first, or to , to make parent element animate after its children: when beforeChildren afterChildren const container: Variants = { { , { , }
  }, { }
}; active: background: "#ff00b1" transition: staggerChildren: 0.5 when: "beforeChildren" disabled: background: "#0D00FF" With this configuration, the parent changes background color first, and then child elements rotate with a staggered delay. div There are a lot more properties of variants that we can control - animation delays, stagger direction, etc. You can find more information on them in framer-motion . documentation Wrapping up In this article, we’ve seen how easy it is to animate React components using declarative API that framer-motion provides. However, we just scratched the surface, since there’s a lot more that framer-motion is capable of - gestures, dragging, working with SVG paths and much more. If you’re interested in learning more - that will cover all the cool things that framer-motion has to offer. subscribe for my upcoming course

Here's How You can Animate React with Framer Motion

I chose to share some aspects of my design process, as there is an abundance of fascinating content out there, ranging from general information to specific details. Sometimes, I find it valuable to compare my proсess with others and gain insights from their experiences. This text is a continuation of the previous one, related to the project I am currently working as a solo designer. I recommend that you start by spending 5 minutes reading the first article at the following link to gain more context. https://hackernoon.com/the-implementation-of-design-guidelines-for-small-and-medium-projects?embedable=true In my previous post, I discussed my experience with using design systems. The design development stage is almost finished now that this phase has been completed successfully, and I have recently begun building a website on Framer. Towards the end of the article I plan to write a couple of lines about working with Framer, but I'll go in order. Notable is a company in the engineering field that focuses on chemical product areas. The company has three distinct product lines: metering pumps, chemical pumps, and chemical reagents. The company has built a strong presence in its industry through over a decade of successful operation in the B2B market. The project's current aims include boosting brand awareness and growing the base of loyal customers. The primary issue stems from the company having three distinct operating divisions, each catering to unique target audiences and requirements. In other words, a user searching for specific information may become confused by irrelevant information, making their experience more complicated. Furthermore, the detailed technical information included in product descriptions can make it challenging to organize the visual hierarchy of content and may result in overwhelming the reader with too much information. This is how the issue was initially explained in the project. However, if you dig deeper, you will need to untangle a complex web of various questions. Gain an understanding of the user including their motives for visiting the site, the situations they are in, the questions they ask, and especially what expectations they have from the business. Conversely, the business aims to operate and grow successfully. In essence, you must strike a balance between assisting the user in navigating their current path more efficiently and aiding the business in generating revenue. Highlighting the main benefits of the service and ironing out any potential issues is essential for this task. Every business has its bottlenecks, but it's not always convenient for your client to discuss them. Based on Notable's accumulated experience, the most common ways users find a company's website have been identified: During the design phase of an object, a request is made for a specific technological solution with the involvement of key product components. The user is typically a design engineer with expertise in technology and familiarity with our products. The main benefit for the user is the ease of accessing information and navigation. It is not necessary to provide the full specification, but it is crucial to include specific key elements to ensure the designer fully grasps the requirements. The request has come up because of an unexpected incident at the facility and needs to be resolved quickly. The main focus is on navigation, providing relevant information, and establishing a clear visual hierarchy to simplify the process and guide the user. In this situation, we are not working with a designer, but instead with a manager from the procurement department. And it is probable that his technical expertise concerning the requested product will not be as extensive as it was in the prior situation. The situation occurs when a user is looking for a trustworthy business partner. In this instance, the important values are expertise, reliability, stability and brand awareness. Throughout Notable's operational period, the business has also gone through transformation. The previous top sellers have been replaced by other products. There are new solutions that have surfaced. The company naturally aims to differentiate itself in the market by creating a fresh and distinctive brand identity. In analyzing the industry and the branding of companies within similar fields, it became evident that the color balance is heavily skewed towards shades of blue. After a while, we decided to go with this color palette, which mirrors the gradient in the company logo. I believe that this decision allows us to evoke the appropriate emotions. Additionally, the logo's gradient and depth of color highlight the company's accumulated expertise over the years. Returning to the idea of making navigation easier, I thought about using this gradient on the homepage to smoothly move from hero section to the next until reaching the bottom of the page. Our target audiences vary greatly, so the solution needs to be easily understandable for all. The concept is for the user to scroll through the main page to find the relevant section, select a specific color scheme, such as Purple Heart for chemical reagents, and then continue navigating the site horizontally in this Monochromatic color scheme. The user is greeted by the start screen in Columbia Blue, followed by the dosing equipment block in Medium Purple, chemical reagents in Purple Heart, chemical pumps in Persian, and finally, Indigo tones in the footer. Therefore, the main page was designed with an Analogous color scheme to help users easily concentrate on the content they need. I also added horizontal color palettes to each block using color theory and a better sequence for the user. For instance, when browsing the Purple Heart – chemical reagents pages, the user will stay within the color scheme of the corresponding Monochromatic palette. Website structure. A decision was made to shift from a tree-like structure to a combined, linear one in order to facilitate and accelerate the user's journey. The target pages for the company's top-earning products can now be accessed with just one click. The Bento system made this possible. Cards and an improved visual hierarchy were used to highlight the top products in each Bento block. Therefore, the revised website now consists of just 25 pages, as opposed to the original 61. The achievement was partly a result of the easier-to-use content delivery system and the specific product pages. Therefore, the information architecture on Notable's corporate website now appears as follows: homepage;
Two intermediate pages;
form page;
3 key product pages;
2 service pages;
16 product pages. Three breakpoints were implemented for the main page, intermediate pages, form pages, key product pages, and service pages to ensure a responsive design: Desktop 1200 px, Tablet 1199-810 px и Phone 809 px. On Desktop, the content area is set to 1200 px; I used a simple 12-column grid with a 24 px gutter. The design for Tablet and Phone is completely adaptable. In the end, the design system I developed for this project included: 1389 components;
288 styles;
166 variants. This case is one of those where you don't have enough high quality graphic content. That's just how it turned out. It was necessary to gather everything available, to upscale in some areas, and to attempt to enhance the quality in others. It was challenging to create a large amount of content in Midjourney and other AIs because the neural network is unable to produce technical materials of this quality, this leads to numerous errors and inaccuracies, which quickly and greatly diminish the user's confidence in Notable's expertise. I edited the graphics in Photoshop, incorporated them into a unified color palette, and created the mockups. During my journey, Midjourney has been incredibly useful to me when dealing with abstract graphics representing the movement of liquid. I was fortunate in this instance as I utilized it on the home page start screens, intermediate screens, and the page featuring a key product. The style is consistent, but my main page features a light theme, the product page has a dark theme, and for the intermediate page, as a variation, I animated this abstract flow in Pika. Next I proceeded to construct the website on Framer. Initially, I perceived this stage as a specific challenge due to my lack of experience with Framer. I have experience using different website builders in the past and now have the opportunity to test this one. There is one particular drawback: the expense. Nevertheless, in all other aspects, there are only benefits at this point in time. Usually, one may face several limitations regarding the layout while collaborating with site builders. You have to pursue compromises and depart from the initial design. In the case of Framer, the process involves transferring the layout from Figma with the assistance of plugins, and the use of components is essential. Consequently, this procedure requires a certain amount of time. The animation is generated with minimal effort utilizing only a few mouse clicks. I have a sincere passion for animating layouts in Figma, and I frequently observe a point at which loading speeds noticeably decrease. However, in Framer, any layout is brought to life in a captivating and engaging manner, without requiring a significant time investment. By simply watching a couple of videos from their academy on YouTube, one can quickly gain the skills to enhance dynamic elements. Currently, I will suspend further discussion, and anticipate sharing my impressions following the release in my upcoming post. I chose to share some aspects of my design process, as there is an abundance of fascinating content out there, ranging from general information to specific details. Sometimes, I find it valuable to compare my proсess with others and gain insights from their experiences. This text is a continuation of the previous one, related to the project I am currently working as a solo designer. I recommend that you start by spending 5 minutes reading the first article at the following link to gain more context. https://hackernoon.com/the-implementation-of-design-guidelines-for-small-and-medium-projects?embedable=true https://hackernoon.com/the-implementation-of-design-guidelines-for-small-and-medium-projects?embedable=true In my previous post, I discussed my experience with using design systems. The design development stage is almost finished now that this phase has been completed successfully, and I have recently begun building a website on Framer. Towards the end of the article I plan to write a couple of lines about working with Framer, but I'll go in order. Notable is a company in the engineering field that focuses on chemical product areas. The company has three distinct product lines: metering pumps, chemical pumps, and chemical reagents. The company has built a strong presence in its industry through over a decade of successful operation in the B2B market. The project's current aims include boosting brand awareness and growing the base of loyal customers. The primary issue stems from the company having three distinct operating divisions, each catering to unique target audiences and requirements. In other words, a user searching for specific information may become confused by irrelevant information, making their experience more complicated. Furthermore, the detailed technical information included in product descriptions can make it challenging to organize the visual hierarchy of content and may result in overwhelming the reader with too much information. This is how the issue was initially explained in the project. However, if you dig deeper, you will need to untangle a complex web of various questions. Gain an understanding of the user including their motives for visiting the site, the situations they are in, the questions they ask, and especially what expectations they have from the business. Conversely, the business aims to operate and grow successfully. In essence, you must strike a balance between assisting the user in navigating their current path more efficiently and aiding the business in generating revenue. Highlighting the main benefits of the service and ironing out any potential issues is essential for this task. Every business has its bottlenecks, but it's not always convenient for your client to discuss them. Based on Notable's accumulated experience, the most common ways users find a company's website have been identified: During the design phase of an object, a request is made for a specific technological solution with the involvement of key product components. The user is typically a design engineer with expertise in technology and familiarity with our products. The main benefit for the user is the ease of accessing information and navigation. It is not necessary to provide the full specification, but it is crucial to include specific key elements to ensure the designer fully grasps the requirements. During the design phase of an object, a request is made for a specific technological solution with the involvement of key product components. The request has come up because of an unexpected incident at the facility and needs to be resolved quickly. The main focus is on navigation, providing relevant information, and establishing a clear visual hierarchy to simplify the process and guide the user. In this situation, we are not working with a designer, but instead with a manager from the procurement department. And it is probable that his technical expertise concerning the requested product will not be as extensive as it was in the prior situation. The request has come up because of an unexpected incident at the facility and needs to be resolved quickly. The situation occurs when a user is looking for a trustworthy business partner. In this instance, the important values are expertise, reliability, stability and brand awareness. The situation occurs when a user is looking for a trustworthy business partner. Throughout Notable's operational period, the business has also gone through transformation. The previous top sellers have been replaced by other products. There are new solutions that have surfaced. The company naturally aims to differentiate itself in the market by creating a fresh and distinctive brand identity. In analyzing the industry and the branding of companies within similar fields, it became evident that the color balance is heavily skewed towards shades of blue. After a while, we decided to go with this color palette, which mirrors the gradient in the company logo. I believe that this decision allows us to evoke the appropriate emotions. Additionally, the logo's gradient and depth of color highlight the company's accumulated expertise over the years. Returning to the idea of making navigation easier, I thought about using this gradient on the homepage to smoothly move from hero section to the next until reaching the bottom of the page. Our target audiences vary greatly, so the solution needs to be easily understandable for all. The concept is for the user to scroll through the main page to find the relevant section, select a specific color scheme, such as Purple Heart for chemical reagents, and then continue navigating the site horizontally in this Monochromatic color scheme. The user is greeted by the start screen in Columbia Blue, followed by the dosing equipment block in Medium Purple, chemical reagents in Purple Heart, chemical pumps in Persian, and finally, Indigo tones in the footer. Therefore, the main page was designed with an Analogous color scheme to help users easily concentrate on the content they need. I also added horizontal color palettes to each block using color theory and a better sequence for the user. For instance, when browsing the Purple Heart – chemical reagents pages, the user will stay within the color scheme of the corresponding Monochromatic palette. Website structure. A decision was made to shift from a tree-like structure to a combined, linear one in order to facilitate and accelerate the user's journey. The target pages for the company's top-earning products can now be accessed with just one click. The Bento system made this possible. Cards and an improved visual hierarchy were used to highlight the top products in each Bento block. Therefore, the revised website now consists of just 25 pages, as opposed to the original 61. The achievement was partly a result of the easier-to-use content delivery system and the specific product pages. Therefore, the information architecture on Notable's corporate website now appears as follows: homepage; Two intermediate pages; form page; 3 key product pages; 2 service pages; 16 product pages. homepage; Two intermediate pages; form page; 3 key product pages; 2 service pages; 16 product pages. Three breakpoints were implemented for the main page, intermediate pages, form pages, key product pages, and service pages to ensure a responsive design: Desktop 1200 px, Tablet 1199-810 px и Phone 809 px. On Desktop, the content area is set to 1200 px; I used a simple 12-column grid with a 24 px gutter. The design for Tablet and Phone is completely adaptable. In the end, the design system I developed for this project included: 1389 components; 288 styles; 166 variants. 1389 components; 288 styles; 166 variants. This case is one of those where you don't have enough high quality graphic content. That's just how it turned out. It was necessary to gather everything available, to upscale in some areas, and to attempt to enhance the quality in others. It was challenging to create a large amount of content in Midjourney and other AIs because the neural network is unable to produce technical materials of this quality, this leads to numerous errors and inaccuracies, which quickly and greatly diminish the user's confidence in Notable's expertise. I edited the graphics in Photoshop, incorporated them into a unified color palette, and created the mockups. During my journey, Midjourney has been incredibly useful to me when dealing with abstract graphics representing the movement of liquid. I was fortunate in this instance as I utilized it on the home page start screens, intermediate screens, and the page featuring a key product. The style is consistent, but my main page features a light theme, the product page has a dark theme, and for the intermediate page, as a variation, I animated this abstract flow in Pika. Next I proceeded to construct the website on Framer. Initially, I perceived this stage as a specific challenge due to my lack of experience with Framer. I have experience using different website builders in the past and now have the opportunity to test this one. There is one particular drawback: the expense. Nevertheless, in all other aspects, there are only benefits at this point in time. Usually, one may face several limitations regarding the layout while collaborating with site builders. You have to pursue compromises and depart from the initial design. In the case of Framer, the process involves transferring the layout from Figma with the assistance of plugins, and the use of components is essential. Consequently, this procedure requires a certain amount of time. The animation is generated with minimal effort utilizing only a few mouse clicks. I have a sincere passion for animating layouts in Figma, and I frequently observe a point at which loading speeds noticeably decrease. However, in Framer, any layout is brought to life in a captivating and engaging manner, without requiring a significant time investment. By simply watching a couple of videos from their academy on YouTube, one can quickly gain the skills to enhance dynamic elements. Currently, I will suspend further discussion, and anticipate sharing my impressions following the release in my upcoming post.

Specific Details of the Design Process

A prototyped concept Source Background This past summer, I was lucky enough to travel internationally to eight countries (Switzerland, Italy, Norway, Singapore, Malaysia, Japan, Thailand, India) and stay in more than a dozen Airbnbs along the way. During my travel planning, I repetitively booked Airbnbs and flights one after another and really wished both processes were integrated together more seamlessly. I was also intrigued by Brian Chesky’s tweets last year about redesigning the flying experience: Coupled with some of Brian’s main ideas in this and the recent launch of Airbnb and , it seemed pretty clear to me that Airbnb’s long-term vision is to control the entire end-to-end traveling experience from arrival to departure. Maybe one day Airbnb will operate its own airline, but in the meantime I think helping guests book flights alongside their home accommodations is a more immediate first step. podcast Experiences Restaurants Brainstorming Most of my brainstorming involved thinking about what I personally looked for when booking Airbnbs and flights on separate sites and how combining the process could be more efficient, as well as lead to other concrete advantages. I also asked some friends with similar traveling experiences about their travel planning and any problems they usually run into. Some of my messy notes and sketches while thinking about this feature By the end, I narrowed down on the following ideas that would provide guests value beyond just speeding up the two-fold process: Airbnb could provide a smarter selection of homes and flights. For example, homes that are closer to an airport or airport transit could be prioritized over homes that would require an expensive Uber ride to get to. In addition, Airbnb could suggest flights that align with the check-in or check out policies of homes to minimize the the amount of time carrying luggage around. Having access to a guest’s flight information could improve communication between guests and hosts, since Airbnb could automatically notify a host about late check-ins by tracking flight delays. Guests could use one app for all their travel bookings — flights, homes, things to do via Experiences, and places to eat via Restaurants. Design To get started on designing what I thought booking flights could look like on Airbnb, I took dozens of screenshots from Airbnb’s current and used patterns from existing screens to stay inline with Airbnb’s style. iOS app design Final artboards in Sketch After creating and tweaking the new screens with the help of , I decided to some of the fundamentals behind to get a more intuitive feel for where these screens would exist in the current app. Luckily, it was super easy to import my existing Sketch file into Framer and add transitions between all the screens: Sketch Mirror learn Framer Flows Conclusion I’m pretty happy with the way the final Framer prototype turned out. It was an interesting feature to think about and one that I hope Airbnb adds before I book my next trip. Most of my assumptions in the process of building this centered around my personal and my friends’ experiences, so I’m curious what decisions Airbnb makes after interviewing hundreds of users. Furthermore, I’m trying to get better at this, so any feedback is appreciated. Thank you!

Booking Flights on Airbnb

Using Framer for Android prototyping All programmers with Mobile Application experience have been in the situation of trying to create a prototype to showcase the application idea in a quick way! development Creating a prototype is a tricky task in term of time and quality. Usually, you have the minimum time available for creating a fancy Application which must not work but look perfect. How is this possible? No one knows that we have to code or design for every animation or loading data to list in , which is really time-consuming. Android What is Framer? As a reference to : framer.com The familiarity of visual editing with the flexibility of code. A seamless workflow, further complemented by device previewing, version control and easy sharing. Pioneer new interaction patterns and create groundbreaking apps. The design and prototyping tool preferred by product teams at startups, agencies and Fortune 500s worldwide. There are many nice words in this paragraph, but it really works! Unfortunately, you will mention that the most of the screen shots for this tool is on iPhone devices, and they didn’t mention that we can use it for Android, too! Framer sample project Framer creates a dynamic website package using JavaScript which can be loaded in an offline WebView, so the integration phase is very simple. Where should I start? Framer is not free, but you can test it with a trial account and if you or your company enjoyed it you can pay later, so download it from here: _Design interactive high-fidelity prototypes for iOS, Android, desktop or the web. Invent new animations and…_framer.com Design everything with code At first glance, it may look very crowded with lots of code, but I will assure you it will take only one day to become a professional Framer designer! Just take a look at this product’s YouTube channel and watch all tutorials, currently, there are only 14 videos which take one and half hour! _Insert, design and animate text with Framer Type. Our TextLayer is completely dynamic, which means we default to system…_www.youtube.com Framer A perfect feature of this tool is importing graphic assets directly from , which will make your job much more easier. You have to ask your UI/UX designer to hand over a standard Sketch file and then you can import it directly into Framer project and some little code to make it work. Sketch Integrate Framer in Android As I mentioned, a Framer project is a dynamic website using JavaScript which the entrance is an file, so if you have the experience of loading such an offline website from Assets folder into WebView you can go now and start prototyping! index.html Let’s begin with creating an empty Android application, and copy your framer project into assets folder. (You can create the assets folder using Android Studio, File > New > Folder > Assets Folder) Create assets folder in project , now copy your Framer project into your Android application project assets folder, Framer project added to Assets folder We need to add a WebView to our layout and add some code for loading Framer project in it. activity_main.xml <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"> <WebView  
    android:id="@+id/webView"  
    android:layout\_width="match\_parent"  
    android:layout\_height="match\_parent"/> </LinearLayout> MainActivity.java public class MainActivity extends AppCompatActivity { WebView webView;

@Override  
protected void onCreate(Bundle savedInstanceState) {  
    super.onCreate(savedInstanceState);  
    setContentView(R.layout._activity\_main_);

    webView = (WebView) findViewById(R.id._webView_);

    WebSettings settings = webView.getSettings();  
    settings.setAllowFileAccessFromFileURLs(true);  
    settings.setJavaScriptEnabled(true);

    webView.loadUrl("file:///android\_asset/Sample.framer/index.html");  
} } That is almost done, you can now run the app! Framer Local File Restrictions warning! A solvable warning! There is an issue with loading Framer directly into WebView which cause a warning for file access permission despite adding this setting to WebView: settings.setAllowFileAccessFromFileURLs(true); Which can be solved by loading Framer from a web service (locally or on the Internet) or there is an easier way, you can change the method that causes this warning! Just open inside your Framer project’s Framer folder and edit the first JavaScript function: framer.init.js function isFileLoadingAllowed() {// return (window.location.protocol.indexOf("file") == -1)return true;} That’s it, now you can run your prototype without any warning. Android Application prototype using Framer Create a connection between Framer and Android In most of the prototyping cases you would need to load a fancy UI which react to user interaction with an animation or some transaction or scrolling, but if you like to have a connection between your code and Framer project and develop for events it is possible. You can also load data from your app into Framer. In this case, you would need a Javascript interface to add it to WebView: JavascriptHandler.java public class JavascriptHandler { private Activity activity;  
private WebView webView;  

public JavascriptHandler(Activity activity, WebView webView) {  
    this.activity = activity;  
    this.webView = webView;  
}  

_/\*\*  
 \* This method handles call from Framer  
 \*/_    @JavascriptInterface  
public void javascriptCall(String jsString) {  
    Toast._makeText_(activity, jsString, Toast._LENGTH\_LONG_).show();  
}  

_/\*\*  
 \* This method handles call from Android  
 \*/_    public void javaCall(String message) {  

    final String webUrl = "javascript:DeviceComponent.displayJavaMessage('" + message + "')";  
    // Add this to avoid android.view.windowmanager$badtokenexception unable to add window  
    if (!activity.isFinishing())  
        // loadurl on UI main thread  
        activity.runOnUiThread(new Runnable() {  

            @Override  
            public void run() {  
                webView.loadUrl(webUrl);  
            }  
        });  
} } , and you can add it as a JavaScript interface to WebView using this line of code: MainActivity.java webView.addJavascriptInterface(new JavascriptHandler(this, webView), "JavascriptHandler"); Now you can send events to Android by adding this line of code to your Framer project: app.coffee JavascriptHandler.javascriptCall(“LayerA clicked!”) LayerB clicked event sent from Framer to Android , or you can send a message to Framer by calling this method from Android: javascriptHandler.javaCall("Hi!!!"); Done! You can now start creating your own prototypes without thinking about Android development, UI elements or Animations. TL;DR is a perfect tool for creating a well-designed prototype application as fast as possible that can be integrated with Android so easily. Framer Source-Code and more info You can access this sample project source code repo here on GitHub: _framer-android-wrapper - Framer Android Wrapper Application_github.com mirhoseini/framer-android-wrapper , and also read more about Framer here: _Design interactive high-fidelity prototypes for iOS, Android, desktop or the web. Invent new animations and…_framer.com Design everything with code P.S. This post is not an advertisement and unfortunately no one didn’t paid me a cent. The point is, I have recently founded this tool and decide to share my experience with it and I am using a trial version, too. 🤣 I look forward for your comments and sharing your experience with Framer. Share this article if you think it is useful by tapping 💚 button, and follow me for more articles . Mohsen Mirhoseini Argi _I am a senior Android Developer with about nine years experience in the field of Computer Software engineering. I have…_mirhoseini.info Mohsen Mirhoseini - Senior Android Developer

Creating a quick fancy Android application prototype

React animations are a powerful way to make your web applications more engaging and dynamic. With animations, you can add personality to your user interfaces, provide visual feedback, and create more immersive experiences for your users. Animations can also help guide users through complex workflows and provide context for actions on the screen. One popular library for creating animations in React is Framer Motion. Framer Motion is a simple and easy-to-use library that allows you to create high-quality animations with just a few lines of code. With Framer Motion, you can animate anything in your React components, including the position, size, opacity, and rotation of elements. You can also create more complex animations by using features like drag and drop, gesture recognition, and physics-based animations. Prerequisites To use Framer Motion, there are a few prerequisites you should have in place: Basic knowledge of HTML, CSS, and JavaScript: Framer Motion is a library for creating animations in React, which is a JavaScript library. You should have a good understanding of HTML and CSS for building web applications, as well as some experience with JavaScript programming. Familiarity with React: Framer Motion is a library specifically designed for creating animations in React. Therefore, you should have some experience with React and its basic concepts, such as components, state, and props. Code Editor: You will need a code editor to write your React components and Framer Motion animations. There are many popular code editors to choose from, including Visual Studio Code, Sublime Text, and Atom. Node.js and NPM: Framer Motion is installed as an NPM package, so you will need to have Node.js and NPM installed on your computer. You can download and install them from the official Node.js website. Framer Motion library: Finally, you will need to install the Framer Motion library itself. You can do this by running the command in your project directory. npm install framer-motion Once you have these prerequisites in place, you are ready to start learning Framer Motion and creating stunning animations for your React applications. Creating Animations With Framer Motion Keyframes When creating animations with Framer Motion, you can use keyframes to define the specific values that an animation will take on at different points in time. Here's an overview of the basic keyframes you can use in Framer Motion: and : from to The and keyframes define the starting and ending points of an animation. For example, you could create a basic animation that moves an element from left to right using the following keyframes: from to const exampleAnimation = {
  from: {
    x: -100,
  },
  to: {
    x: 100,
  },
} In this example, the element would start 100 pixels to the left of its original position and move 200 pixels to the right over the course of the animation. GIF animate The keyframe allows you to define a series of keyframes that the animation will transition through over time. For example, you could create an animation that changes the background color of an element from red to blue using the following keyframes: animate const exampleAnimation = {
  animate: {
    backgroundColor: ['red', 'blue'],
    transition : {delay: 2}
  },
} In this example, the background color would transition smoothly from red to blue over the course of the animation. GIF transition The keyframe allows you to specify the duration and easing of an animation. For example, you could create an animation that moves an element up and down using the following keyframes: transition const exampleAnimation = {
  from: {
    y: 0,
  },
  to: {
    y: 100,
  },
  transition: {
    duration: 1,
    ease: 'easeInOut',
    yoyo: Infinity,
  },
} In this example, the element would move 100 pixels up and down over the course of 1 second, using an easing function that starts and ends slowly and speeds up in the middle. The property specifies that the animation should repeat indefinitely. yoyo GIF These are just a few examples of the keyframes you can use to create animations with Framer Motion. By combining these keyframes and experimenting with different values and options, you can create complex, dynamic animations that bring your website or app to life. Conclusion In conclusion, keyframes are an essential tool for creating fluid and dynamic animations in Framer Motion. By defining the properties of an element at specific points in time, you can create animations that respond to user interactions, convey information, and enhance the overall user experience. Whether you're a beginner or an experienced developer, mastering the keyframe is a crucial step in creating compelling animations with Framer Motion. So why not give it a try, and see how keyframes can elevate your animations to the next level? References Framer Motion official documentation Framer Motion video tutorials on YouTube

Framer Motion: The Ultimate Keyframe Tutorial for Mind-Blowing Animations

Interruption in the user's experience while navigating between pages can often lead to them going off the website. We could improve on that by adding page transitions in our web application which could lead to an uninterrupted experience for the user. This article aims to explain, how we could create one such page transition animation for a gallery web app using React & Framer Motion. So let's get started with it then! 😉 Project Initialisation npx create-react-app gallery Install Dependencies for transition animation Framer Motion for styling needs Styled Components for style helper functions Polished for utility hooks React Use yarn add framer-motion styled-components polished react-use Images Data Structure All the images are stored in an array of the following data structure: {
   "name": string,
   "location": string,
   "variant": string,
   "creator": {
     "name": string,
     "avatar": url_string
   }
} App Component component is called inside App component. ImageGrid // path:src/App.js

import { useState } from "react";

// External
import styled from "styled-components";
import { motion } from "framer-motion";

// Components
import ImageGrid from "./components/image-grid";

// Styles
import { Container, Heading } from "./styles/globalStyles";

const AppStyles = styled(motion.div)`
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8ebe2;
`;

const App = () => {
  // index of the image being shown
  const [selectedImage, setSelectedImage] = useState(-1);

  return (
    <AppStyles>
      <Container>
        <Heading>Explore 🇮🇳</Heading>
        <ImageGrid
          selectedImage={selectedImage}
          setSelectedImage={setSelectedImage}
        />
      </Container>
    </AppStyles>
  );
};

export default App; Image Grid Component This page shows all the images in a . masonry grid layout // path:src/components/image-grid/index.js

import { useState, useEffect } from "react";

// External
import { AnimateSharedLayout } from "framer-motion";
import { useLockBodyScroll } from "react-use";

// Components
import SinglePicture from "./single-picture";

// Styles
import { Grid } from "./styles";

// Data
import data from "../../data.json";

const ImageGrid = ({ selectedImage, setSelectedImage }) => {
  // helps in preventing body from scrolling when an image page is being shown
  const [isScrollLocked, setScrollLocked] = useState(false);

  useLockBodyScroll(isScrollLocked);

  useEffect(() => {
    if (selectedImage !== -1) {
      setScrollLocked(true);
    } else {
      setScrollLocked(false);
    }
  }, [selectedImage]);

  return (
    <AnimateSharedLayout>
      <Grid>
        {data.images.map((data, index) => (
          <SinglePicture
            key={`${data.name}-${index}`}
            isSelected={selectedImage === index}
            index={index}
            setSelectedImage={setSelectedImage}
            data={data}
          />
        ))}
      </Grid>
    </AnimateSharedLayout>
  );
};

export default ImageGrid; Single Picture This page shows a single image with some image metadata. // path: src/components/image-grid/single-picture.jsx

// Styles
import { Flex } from "../../styles/globalStyles";
import {
  Image,
  SinglePictureContainer,
  Back,
  InfoCard,
  Name,
  PhotographerName,
  Avatar,
  Location,
} from "./styles";

// Assets
import images from "../../images";
import { CloseIcon } from "../../images/CustomIcons";

// animation config and variants
const spring = {
  type: "spring",
  stiffness: 500,
  damping: 30,
};

const backVariants = {
  initial: {
    opacity: 0,
    y: -20,
  },
  animate: { opacity: 1, y: 0 },
};

const cardVariants = {
  initial: {
    opacity: 0,
    y: 100,
    x: "-50%",
  },
  animate: { opacity: 1, y: 0, x: "-50%" },
};

const SinglePicture = ({
  isSelected,
  setSelectedImage,
  index,
  data: { creator, location, name, variant },
}) => {
  const goBack = () => {
    setSelectedImage(-1);
  };

  return (
    <SinglePictureContainer
      isSelected={isSelected}
      layoutId={`card-container--index-${index}`}
      transition={spring}
      variant={variant}
    >
      {isSelected && (
        <Back
          onClick={goBack}
          initial="initial"
          animate="animate"
          exit="initial"
          transition={{ delay: 0.2, duration: 0.5 }}
          variants={backVariants}
        >
          <CloseIcon />
        </Back>
      )}
      <Image
        src={images[name]}
        alt={name}
        onClick={() => {
          setSelectedImage(index);
        }}
        isExpanded={isSelected}
        layoutId={`card-image--index-${index}`}
      />
      {isSelected && (
        <InfoCard
          initial="initial"
          animate="animate"
          exit="initial"
          transition={{ delay: 0.1, duration: 0.5 }}
          variants={cardVariants}
        >
          <Location>{location}</Location>
          <Name>{name}</Name>
          <Flex>
            <Avatar
              image={
                !!creator.avatar
                  ? `${creator.avatar}?q=10&w=50`
                  : images.avatarFallback
              }
            />
            <PhotographerName>{creator.name}</PhotographerName>
          </Flex>
        </InfoCard>
      )}
    </SinglePictureContainer>
  );
};

export default SinglePicture; Conclusion And there we have it, the gallery page transition animation is ready. The is available on Github. Would love to hear your valuable feedback in the comments down below. Code See you guys 👋🏻  in the next article of this Component series! Happy coding & Stay safe! ✨ Follow me on & for more! Twitter Instagram This article can also be read on my . website

Create Zoom Transition Animations in React and Framer Motion: A How-To Guide

Live link: Portfolio Github Repo: Repo Pages Home Page Achievements About Open-source Blog Tech Stack Developer Story Built with Typescript Reactjs ChakraUI Framer Motion blurhash Progressive image loading react icons Screen Images

How To Build A Portfolio Website with React, ChakraUi and framerMotion

I know building TODO List won't always get you too far😴, but it can teach you basic concepts and implementation of a particular framework. Here is the demo of what we're going to build in this tutorial.👇👇 Link: https://react-redux-todo-app-lac.vercel.app/ Now please, if you're starting this tutorial watch till the end because doing it half won't teach you anything. So let's dig in.🤩 In this tutorial, we're going to build this TODO app with animations using Framer-Motion. What will you learn after this Tutorial? How to use Redux Toolkit How to use Framer-Motion for awesome animations Method to sort and display lists CRUD operation (obviously🤭) If you prefer to code along with the same steps while listing to music you can watch this video 👀: You must have basic understanding of Redux to follow this tutorial, don't worry if you don't know the basics of Redux you can visit my channel, there is playlist to learn redux. Let's Get Started First, below is the folder structure for this small project so make sure you create it. Folder Structure |--redux(folder)
   |--reducer.js (here we will create actions and reducer)
   |--store.js
|--components(folder)
   |--Todos.js
   |--TodoItem.js
    --DisplayTodos.js
|--css(folder)
   |--main.css src Follow the below commands to create the react-app and install the required libraries! cd your-app-name
npm install react-redux @reduxjs/toolkit framer-motion react-icons npx create-react-app your-app-name We're going to use all four libraries; react-icons is to add svg files in our app. First, let's add one input and add a button in the . Todos.js setTodo(e.target.value);
  }; );
}; import React, { useState } from "react" ; const Todos = ( props ) => { const [todo, setTodo] = useState( "" ); const handleChange = ( e ) => { return ( < div className = "addTodos" > < input type = "text" onChange = {(e) => handleChange(e)} className="todo-input" value={todo} /> < button className = "add-btn" > Add </ button > < br /> </ div > export default Todos; As you can see in the above code it has one input with handleChange() method and one add button. Creating Reducer and Store Now, let's create our Reducer and actions. Open file and write the below code: reducer.js initialState, state.push(action.payload); },
   
  },
  
}); import { createSlice } from "@reduxjs/toolkit" ; const initialState = []; const addTodoReducer = createSlice({ name : "todos" , reducers : { //here we will write our reducer //Adding todos addTodos : ( state, action ) => { return state; export const { addTodos } = addTodoReducer.actions; export const reducer = addTodoReducer.reducer; Explanation: Now here we're going to use function. createSlice() This function takes 1 object having 3 parameters, --> name of the slice function --> initial State --> All reducer logic inside reducers {} object import createSlice function. Line 1: create initial state here it is an empty array. Line 2: Here we have used createSlice function and passed all 3 required parameters. Line 3: I have created one action called This action gets a callback function that has two arguments (state, action). Then, this function will return state with adding action.payload (payload contains one todo item). addTodos. Here we have exported addTodos as action from addTodoReducer. and we have exported reducer from addTodoReducer. Last two lines: So, let's create our store and pass this reducer. Open store.js and write the below code: }); import { configureStore } from "@reduxjs/toolkit" ; import { reducer } from "./reducer" ; const store = configureStore({ reducer : reducer, export default store; In the above code, we have used the function. configureStore This function takes one reducer and automatically takes care of the Redux DevTools extension so we don't have to write about it explicitly. Now, our store is ready with the reducer that we have created. Connecting Redux Store with React App Let's connect this store to our React application. I like to connect the store in the index.js file. Open index.js file. Import the from the and store from store.js. Provider react-redux import { Provider } from "react-redux" ; import store from "./redux/store" ; Now, just wrap your component with this Provider and pass store in the Provider just like this: <App/> ); ReactDOM.render( < React.StrictMode > //Just like below 👇 < Provider store = {store} > < App /> </ Provider > </ React.StrictMode > , document .getElementById( "root" ) Now, our Redux store is connected with our React App. Connect React component with Redux Let's use this store and Redux functionalities in the component. Todos.js To connect this component with Redux we will use method from . connect() react-redux Open file. Todos.js Import connect method from react-redux. import { connect } from "react-redux" ; Now, instead of simple `export default Todos` change it to this line: export default connect( null , null )(Todos); This is how we use connect method. It's like the higher-order function that takes your component (Todos in our case) and adds redux functionalities to it then returns it. Now, add props in your component and log this props you will see and Object having dispatch method. This means your component is now connected with Redux. Let's use todos state in our component. To use state from redux we have to pass method in the connect method. mapStateToProps and to use actions or functions that we created inside the reducer (like addTodos) we have to create and pass method and add it to the connect method. mapDispatchToProps So, let's create both of these methods in the component. Todos.js };
}; const mapStateToProps = ( state ) => { return { todos : state, This method takes the state as an argument and will return the state as we want here I want to state as todos. };
}; const mapDispatchToProps = ( dispatch ) => { return { addTodo : ( obj ) => dispatch(addTodos(obj)), This method takes dispatch as an argument and it can dispatch an action to the reducer. Here, I want to add todos so this method returns and addTodo method. addTodo method dispatch an addTodos action with an obj (which contains todo item, it will acts as action.payload ). Here, make sure to import addTodos action from reducer file. Now, add both of these methods in the connect just like this: export default connect(mapStateToProps,mapDispatchToProps)(Todos); let's connect input and add button with this state and methods. Here I have created add function. First, it will check if the todo state is not empty if it is empty then shows an alert else it will use addTodo method from props. In this method, we will pass todo object which contains , text, boolean which is initially false. Line 23: id todo completed Make sure to connect add() with onClick of a button. Line 50: here I have mapped values from todos state. Line 55: If todos.length > 0 then it will map it and shows all todo items you add. You can also use Redux DevTools Extension to see actions and state. Add All operations in the Reducer Let's add all the required operations in the reducer. removeTodos will filterout items whose id is the same as action.payload. (which means while using this action we will pass id as payload). Line 16: updateTodos is used to change todo text or todo.item. It will check if id is the same as passed in action.payload, then it will return all other properties of the item and change the text of todos with the passed value. Line 20: completeTodos will change the completed boolean value of particular item to true. Line 32: Make sure to export all the required todo actions. Line 46: Now we will use all these actions. Let's separate the display todos component from file. Remove list from it and let's add it in the DisplayTodo item component. Todos.js ul Before creating component, first, let's create component. DisplayTodos.js TodoItem.js So, open file and write the below code. TodoItem.js Don't read this code, First read the explanation. Now as you saw in the demo each todo item contains 3 buttons , , and . and 3 methods connected with these buttons. edit complete delete This contains the import of icons from the react-icons library, we will use these icons in the edit, update and remove buttons. Line 2 & 3: These are the all required items that we have to pass while displaying component. Line 7: TodoItem item --> contains all the data of single todo item updateTodo --> Method to update todo completeTodo --> method to set todo is completed removeTodo --> method to remove todo item Here in the return Inside this element you can see, Line 23: li --> it shows the todo text as the default value. textarea --> after the text area, there are 3 buttons that contain icons for edit, update and remove, these buttons are connected with all required methods. buttons --> after these buttons there is one span element that shows done, and it will display only when item.completed is true. span It is a ref which is connected with . Its value is true. Line 9: textarea here, we have used ref value for the disabled attribute, which means while ref is true until then stays disabled. Line 30: textarea This change Function will enable the and adds focus on it. This function is connected with the *edit* button. Line 11: textarea This function is used to update the value of the todo item. It will take 3 arguments, id, updated value, and event. Then when you press the enter key then it will call the method and pass all required things as object and disable the textarea. It is connected on in the textarea at . Line 16: updateTodo onKeyPress Line 32 This remove button is connected with the remove method. we have to pass id of the item we want to remove in this method. Line 48: Now let's use this component inside the file. DisplayTodos.js open and write the below code. DisplayTodos.js Make sure to import component in the file right after the component. DisplayTodos.js App.js Todos Contains all the required imports. Line 1-9: we have already discussed both of these methods. Both of these methods must be passed in the connect method. One of them is to map state to props while the other method contains all the required methods to dispatch particular actions. Line 12 & 18: This state is for those 3 buttons which are active, completed, and all. It is initialised with "active". Line 28: This div contains all 3 buttons and onClick of these buttons *sort* state gets changed based on the button it's values can be "active", "completed", or "all". Line 31: In this element we're rendering 3 different lists based on conditions like, Line 53: ul Renders active todo items when (item.completed === false) and (sort === "active") --> Renders completed todo items when (item.completed === true) and (sort === "completed") --> Renders all todo items when (sort === "all") --> This contains all the data that we need to pass in the component. Line 61-65: TodoItem Now for the Framer-motion and CSS part you can watch the video or read the code from github repository. (It will be more easier to understand when you watch the video then writing here about css and animations ) Full Code of this Tutorial can be found: https://github.com/codebucks27/React-Redux-Todo-App That's the end of this whole Tutorial. 😄 If you're confused about anything related to this topic, feel free to ask me 😉! Also, if you want to learn the Basics of Redux, then please do visit my channel. Thanks For Reading and Supporting.😄 My YouTube channel: @CodeBucks Follow me on Instagram where I'm sharing lots of useful tools and resources! @code.bucks 😉

A Tutorial for Todo Apps using React, Redux and Framer-Motion

Sometimes you just need a quick and dirty way to mock up a UI prototype! I built this out of frustration with existing that are either too complex, cost money or require being a guru in order to build a screen mock up. I wanted something that I could use sitting in front of a customer or prospect and build on the fly. I also wanted something that could easily be extended with your own custom widgets. tools design So here it is: _Edit description_s3.amazonaws.com Web Page Builder by @mikeptweet It looks like this: The instructions are simple: Right Click to Add/DeleteShift+Click To MoveCtrl+Click To ResizeAlt+Click To CloneDouble Click to Edit TextCtrl+S To Save Right clicking on the surface provides a drop down of widgets you can add to the page: You move things around by holding down the key while dragging the mouse. SHIFT You resize things by holding down the key while dragging the mouse. CTRL You copy or clone things by holding down the key while clicking the item and dragging it. ALT Like so: https://s3.amazonaws.com/mparsons/PageBuilder.gif You can edit text by double clicking on any text. You delete things by using the Delete option in the drop down. You can paste HTML content from the clipboard either in a DIV or SPAN or you can use the IFRAME element to paste more complex HTML. To edit the HTML directly, hit F12 to open the browser developer tools and do your edits there. When you are finished, press to save your page locally (make sure you select as the save option). Saving the web page this way also gives you the full editing environment inside your saved page so you can work offline or send the page to someone else for more editing. CTRL+S Web Page Complete Adding you own widget Simply save the page using the option and edit the file using your favourite text editor. You need to add an item to the options list as specified here: CTRL+S var options= {Add:"",Delete:"Delete",Button:"<button>Button</button>",Checkbox:"<input type=checkbox />",Date:"<input type=date />",Div:"<div>Div</div>",File:"<input type=file />",Iframe:"<table border=1><tr height='1%'><th>iframe</th></tr><tr><td valign=top><iframe frameBorder=0 height=100% width=100% srcdoc='<body contenteditable=true>paste stuff here'></iframe></td></table>",Image:"<img src=#/>",Label:"<label>Label</label>",Link:"<a onclick='return false' href=#>Link</a>",List:"<ul><li>Item 1</li><li>Item 2</li></ul>",NumList:"<ol><li>First</li><li>Second</li></ol>",Password:"<input type=password />",Radio:"<input type=radio />",Range:"<input type=range />",Section:"<fieldset><legend>Section</legend></fieldset>",Select:"<select><option>Dropdown</option></select>",Span:"<span>Span</span",Table:"<table border=1><tr height='1%'><th>Col1</th><th>Col2</th><th>Col3</td></tr><tr><td> </td><td> </td><td> </td></tr></table>",TextArea:"<textarea>TextArea</textarea>",TextBox:"<input/>",Title:"<h1>Header</h1>",Video:"<video style='border:1px solid grey' controls></video>"}; You can also edit any of the existing widgets by modifying the HTML. At this point you are simply editing an HTML page so you can also add your own CSS Styles and/or Scripts to the page. I hope to add more features to make this easier soon. This is an early prototype and I’d love to get your feedback on this or any of my other articles on Hacker Noon! _and optionally export it to the clipboard or Excel, JSON, HTML, Tab or Comma delimited file formats! In an earlier…_medium.com Mike Parsons - Medium Thanks and please recommend this article if you find it useful!

Simple Wire Framer / Web Page Builder in 2k gzipped.

Hello JavaScript Enthusiasts! Welcome to another edition of "This Week in JavaScript"! We've got a lot to cover today: Oracle's latest trademark controversy, the new JavaScript temporal object receiving browser support, and some much needed updates to google chrome, along with some great developer tools. Let’s get right into it! Oracle vs. Deno Oracle’s attempt to hold onto the "JavaScript" trademark is stirring up controversy. Ryan Dahl, creator of Node.js and Deno, has filed a petition to cancel the trademark, arguing that JavaScript is an open standard that shouldn't be controlled by Oracle. Here's a quick breakdown: Oracle’s Hold: Oracle renewed the trademark using a screenshot from Node.js (a project they don't own) back in 2019.
Ryan Dahl's Argument: He claims that JavaScript, maintained by various companies, should be a shared open standard.
Oracle’s Response: They’ve filed a motion to dismiss, stating consumers don’t view JavaScript as a generic term. This debate is raising broader questions about whether widely used tech terms should be controlled by one entity. We’ll be watching this as it develops! JavaScript Temporal: Simplifying Dates and Times The Temporal object in JavaScript is here to replace the clunky Date object, making date and time management much more reliable and precise. Key Highlights: Time Zone & Calendar Support: Temporal handles time zones and calendars, unlike the Date object.
Built-in Methods: It includes methods for conversions, comparisons, and formatting.
Precision: Temporal ensures consistent handling of time-sensitive data and internationalization.
Experimental Browser Support: Firefox leads the way with support in its Nightly version, while Chrome and Safari are still in development.
Better Parsing: Temporal avoids the parsing issues that plagued Date, making it a more robust option for developers. Long-Running Tasks in JavaScript: Breaking Them Up! If you've ever had a web page freeze during heavy processing, you’ve encountered the main thread blocking issue in JavaScript. The browser can only do one thing at a time—if a task takes too long, everything else, like button clicks or screen updates, gets delayed. Here's how you can fix this: setTimeout(): Breaks up tasks by letting the event loop handle them bit by bit.
requestAnimationFrame(): Ensures smooth animations while offloading heavy work to background frames.
Web Workers: Offload tasks entirely to different threads, so your main UI stays responsive. With these methods, you can keep your JavaScript tasks efficient and ensure a smoother user experience! React EXE React-EXE, a tool designed to execute React components on the fly, making it ideal for creating live code previews, interactive documentation, or code playgrounds. Key highlights: Real-time Execution: Execute React components on the fly, perfect for live code previews or interactive playgrounds.
External Dependencies: Seamlessly integrate external libraries like Tailwind CSS and Framer Motion.
Custom Styling: Customize component appearance with full support for custom styles and Tailwind CSS. Chrome’s New moveBefore Method Chrome's latest DOM manipulation feature, moveBefore, lets you move elements around the DOM tree without breaking their state. Here’s why it matters: Preserves State: Normally, moving DOM elements causes things like iframes to reload or lose focus—moveBefore fixes that.
Improves Performance: Popovers, animations, and elements maintain their state during moves, meaning fewer disruptions in your web apps. React is already working to integrate this feature, promising smoother web apps without the usual DOM frustrations. Tools & Releases You Should Know About Let’s take a quick look at the latest tools making waves in the JavaScript world this week! pnpm 10.2: The latest pnpm update, version 10.2, makes life easier for JavaScript devs. It now allows packages to run post-install scripts by default when using pnpm dlx or pnpm create. Plus, it introduces a new --allow-build flag for handling dependencies and fixes script execution and proxy issues.
Turborepo 2.4: Turborepo 2.4 revolutionizes monorepo management with the Boundaries feature, which prevents improper imports. Watch Mode now caches tasks for faster development, while circular dependency recommendations and native ESLint v9 support smooth the workflow. The new terminal UI remembers settings, making navigation much more efficient.
tinygradient 2.0: tinygradient 2.0 lets you create beautiful, customizable color gradients in JavaScript. It supports multiple formats like hex, RGB, and HSV, with unlimited color stops and steps. Ideal for UI design, data visualization, or creative projects, it also features an interactive playground to test gradient styles on the fly.
Fuse.js 7.1: Fuse.js 7.1 is a fast, zero-dependency fuzzy search library for JavaScript. It enhances search functionality by finding results even with typos or partial matches. It’s perfect for dynamic content in applications, and it works smoothly on both frontend and backend, improving user experience without requiring a server.
RE2JS: RE2JS is a JavaScript implementation of Google's RE2 engine, providing safer and more efficient regular expression handling. Unlike JavaScript’s RegExp, which can face performance issues, RE2JS guarantees linear time complexity, protecting against ReDoS attacks. It’s an excellent choice for safely processing user-generated patterns in web applications. And that's it for the twenty-first issue of "This Week in JavaScript." If you found these JavaScript updates useful, give this post an upvote to help others discover it. Don’t forget to share it with your fellow developers, and keep an eye out for more insights in the JavaScript world. Until next time, keep coding and stay curious! Hello JavaScript Enthusiasts! Welcome to another edition of " This Week in JavaScript "! This Week in JavaScript We've got a lot to cover today: Oracle's latest trademark controversy, the new JavaScript temporal object receiving browser support, and some much needed updates to google chrome, along with some great developer tools. Let’s get right into it! Oracle vs. Deno Oracle vs. Deno Oracle’s attempt to hold onto the "JavaScript" trademark is stirring up controversy. Ryan Dahl, creator of Node.js and Deno, has filed a petition to cancel the trademark, arguing that JavaScript is an open standard that shouldn't be controlled by Oracle. petition petition Here's a quick breakdown: Here's a quick breakdown: Oracle’s Hold: Oracle renewed the trademark using a screenshot from Node.js (a project they don't own) back in 2019. Ryan Dahl's Argument: He claims that JavaScript, maintained by various companies, should be a shared open standard. Oracle’s Response: They’ve filed a motion to dismiss, stating consumers don’t view JavaScript as a generic term. Oracle’s Hold: Oracle renewed the trademark using a screenshot from Node.js (a project they don't own) back in 2019. Oracle’s Hold: Ryan Dahl's Argument: He claims that JavaScript, maintained by various companies, should be a shared open standard. Ryan Dahl's Argument: Oracle’s Response: They’ve filed a motion to dismiss, stating consumers don’t view JavaScript as a generic term. Oracle’s Response: This debate is raising broader questions about whether widely used tech terms should be controlled by one entity. We’ll be watching this as it develops! JavaScript Temporal: Simplifying Dates and Times JavaScript Temporal: Simplifying Dates and Times The Temporal object in JavaScript is here to replace the clunky Date object, making date and time management much more reliable and precise. The Temporal object in JavaScript The Temporal object in JavaScript Key Highlights: Key Highlights: Time Zone & Calendar Support: Temporal handles time zones and calendars, unlike the Date object. Built-in Methods: It includes methods for conversions, comparisons, and formatting. Precision: Temporal ensures consistent handling of time-sensitive data and internationalization. Experimental Browser Support: Firefox leads the way with support in its Nightly version, while Chrome and Safari are still in development. Better Parsing: Temporal avoids the parsing issues that plagued Date, making it a more robust option for developers. Time Zone & Calendar Support: Temporal handles time zones and calendars, unlike the Date object. Time Zone & Calendar Support: Built-in Methods: It includes methods for conversions, comparisons, and formatting. Built-in Methods: Precision: Temporal ensures consistent handling of time-sensitive data and internationalization. Precision: Experimental Browser Support: Firefox leads the way with support in its Nightly version, while Chrome and Safari are still in development. Experimental Browser Support: Better Parsing: Temporal avoids the parsing issues that plagued Date, making it a more robust option for developers. Better Parsing: Long-Running Tasks in JavaScript: Breaking Them Up! Long-Running Tasks in JavaScript: Breaking Them Up! If you've ever had a web page freeze during heavy processing, you’ve encountered the main thread blocking issue in JavaScript. The browser can only do one thing at a time—if a task takes too long, everything else, like button clicks or screen updates, gets delayed. Here's how you can fix this: Here's how you can fix this: setTimeout(): Breaks up tasks by letting the event loop handle them bit by bit. requestAnimationFrame(): Ensures smooth animations while offloading heavy work to background frames. Web Workers: Offload tasks entirely to different threads, so your main UI stays responsive. setTimeout(): Breaks up tasks by letting the event loop handle them bit by bit. setTimeout(): requestAnimationFrame(): Ensures smooth animations while offloading heavy work to background frames. requestAnimationFrame(): Web Workers: Offload tasks entirely to different threads, so your main UI stays responsive. Web Workers: With these methods , you can keep your JavaScript tasks efficient and ensure a smoother user experience! these methods these methods React EXE React EXE React-EXE , a tool designed to execute React components on the fly, making it ideal for creating live code previews, interactive documentation, or code playgrounds. React-EXE React-EXE Key highlights: Key highlights: Real-time Execution: Execute React components on the fly, perfect for live code previews or interactive playgrounds. External Dependencies: Seamlessly integrate external libraries like Tailwind CSS and Framer Motion. Custom Styling: Customize component appearance with full support for custom styles and Tailwind CSS. Real-time Execution: Execute React components on the fly, perfect for live code previews or interactive playgrounds. Real-time Execution: External Dependencies: Seamlessly integrate external libraries like Tailwind CSS and Framer Motion. External Dependencies: Custom Styling: Customize component appearance with full support for custom styles and Tailwind CSS. Custom Styling: Chrome’s New moveBefore Method Chrome’s New moveBefore Method Chrome's latest DOM manipulation feature, moveBefore , lets you move elements around the DOM tree without breaking their state. moveBefore moveBefore Here’s why it matters: Here’s why it matters: Preserves State: Normally, moving DOM elements causes things like iframes to reload or lose focus—moveBefore fixes that. Improves Performance: Popovers, animations, and elements maintain their state during moves, meaning fewer disruptions in your web apps. Preserves State: Normally, moving DOM elements causes things like iframes to reload or lose focus—moveBefore fixes that. Preserves State: Improves Performance: Popovers, animations, and elements maintain their state during moves, meaning fewer disruptions in your web apps. Improves Performance: React is already working to integrate this feature, promising smoother web apps without the usual DOM frustrations. Tools & Releases You Should Know About Tools & Releases You Should Know About Let’s take a quick look at the latest tools making waves in the JavaScript world this week! pnpm 10.2: The latest pnpm update, version 10.2, makes life easier for JavaScript devs. It now allows packages to run post-install scripts by default when using pnpm dlx or pnpm create. Plus, it introduces a new --allow-build flag for handling dependencies and fixes script execution and proxy issues. Turborepo 2.4: Turborepo 2.4 revolutionizes monorepo management with the Boundaries feature, which prevents improper imports. Watch Mode now caches tasks for faster development, while circular dependency recommendations and native ESLint v9 support smooth the workflow. The new terminal UI remembers settings, making navigation much more efficient. tinygradient 2.0: tinygradient 2.0 lets you create beautiful, customizable color gradients in JavaScript. It supports multiple formats like hex, RGB, and HSV, with unlimited color stops and steps. Ideal for UI design, data visualization, or creative projects, it also features an interactive playground to test gradient styles on the fly. Fuse.js 7.1: Fuse.js 7.1 is a fast, zero-dependency fuzzy search library for JavaScript. It enhances search functionality by finding results even with typos or partial matches. It’s perfect for dynamic content in applications, and it works smoothly on both frontend and backend, improving user experience without requiring a server. RE2JS: RE2JS is a JavaScript implementation of Google's RE2 engine, providing safer and more efficient regular expression handling. Unlike JavaScript’s RegExp, which can face performance issues, RE2JS guarantees linear time complexity, protecting against ReDoS attacks. It’s an excellent choice for safely processing user-generated patterns in web applications. pnpm 10.2: The latest pnpm update, version 10.2, makes life easier for JavaScript devs. It now allows packages to run post-install scripts by default when using pnpm dlx or pnpm create. Plus, it introduces a new --allow-build flag for handling dependencies and fixes script execution and proxy issues. pnpm 10.2 : pnpm 10.2 Turborepo 2.4: Turborepo 2.4 revolutionizes monorepo management with the Boundaries feature, which prevents improper imports. Watch Mode now caches tasks for faster development, while circular dependency recommendations and native ESLint v9 support smooth the workflow. The new terminal UI remembers settings, making navigation much more efficient. Turborepo 2.4 : Turborepo 2.4 tinygradient 2.0: tinygradient 2.0 lets you create beautiful, customizable color gradients in JavaScript. It supports multiple formats like hex, RGB, and HSV, with unlimited color stops and steps. Ideal for UI design, data visualization, or creative projects, it also features an interactive playground to test gradient styles on the fly. tinygradient 2.0 : tinygradient 2.0 Fuse.js 7.1: Fuse.js 7.1 is a fast, zero-dependency fuzzy search library for JavaScript. It enhances search functionality by finding results even with typos or partial matches. It’s perfect for dynamic content in applications, and it works smoothly on both frontend and backend, improving user experience without requiring a server. Fuse.js 7.1 : Fuse.js 7.1 RE2JS: RE2JS is a JavaScript implementation of Google's RE2 engine, providing safer and more efficient regular expression handling. Unlike JavaScript’s RegExp, which can face performance issues, RE2JS guarantees linear time complexity, protecting against ReDoS attacks. It’s an excellent choice for safely processing user-generated patterns in web applications. RE2JS : RE2JS And that's it for the twenty-first issue of " This Week in JavaScript. " This Week in JavaScript. If you found these JavaScript updates useful, give this post an upvote to help others discover it. Don’t forget to share it with your fellow developers, and keep an eye out for more insights in the JavaScript world. Until next time, keep coding and stay curious!

Stories, News & Mentions about FRAMER

Categories

Trending Topics

Stories, News & Mentions about FRAMER

Framer’s Stories on HackerNoon

Categories

Trending Topics