Archive for year: 2020

Original Source: http://feedproxy.google.com/~r/Designrfix/~3/jUCWlbRXSTo/earning-made-easy-in-2020-with-clickfunnels

Starting a company was never easy, but now if they are not online, they practically don’t exist. If you are stressing over your startup or are trying to figure out the ins and outs of how to establish your presence online, ClickFunnels are just what you are looking for. ClickFunnels helps business owners with the […]

The post Earning Made Easy in 2020 With ClickFunnels appeared first on designrfix.com.

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/_UTO6zh33Xs/whimsical-balance-3d

Whimsical Balance in 3D

abduzeedo07.02.20

Pol Solà has an incredible portfolio with some beautiful projects like Rings Of Saturn which was featured on Behance. There’s something about his projects that capture the 80s, in special, that sense of discovering what 3D and CGI could bring to the world in terms of visual design. With “Whimsical Balance” Pol creates a new a series of 3D explorations in collaboration with Guasch Studio. This project expands a bit more the use of textures and other materials. Glass and its reflection/refractions, caustics and how these materials and effects interact with each other to create the whimsical balance.

3D 

Process

Part II

Process

​​​

Part III

​​

Process

Taking one of Pol Sola’s Illustrations as a starting point, this 3D series with Guasch Studio is an exploration of visual tricks: Lights and shadows giving depth and sense to objects that play within the space, still movement and whimsical balance.

For more information make sure to check out Pol’s Instagram and Guasch’s Instagram 

Original Source: http://feedproxy.google.com/~r/tympanus/~3/N1YGL0M-ap0/

At Codrops, we love experimenting with playful hover effects. Back in 2018, we explored a set of fun hover animations for links. We called that Image Reveal Hover Effects and it shows how to make images appear with a fancy animation when hovering items of a menu. After seeing the fantastic portfolio of Marvin Schwaibold, I wanted to try this effect again on a larger menu and add that beautiful swing effect when moving the mouse. Using some filters, this can also be made more dramatic.

If you are interested in other similar effect, have a look at these:

Image Trail EffectsImage Distortion Effects with SVG FiltersImage Dragging Effects

So, today we’ll have a look at how to create this juicy image hover reveal animation:

Some Markup and Styling

We’ll use a nested structure for each menu item because we’ll have several text elements that will appear on page load and hover.

But we’ll not go into the text animation on load or the hover effect so what we are interested in here is how we’ll make the image appear for each item. The first thing I do when I want to make a certain effect is to write up the structure that I need using no JavaScript. So let’s take a look at that:

<a class=”menu__item”>
<span class=”menu__item-text”>
<span class=”menu__item-textinner”>Maria Costa</span>
</span>
<span class=”menu__item-sub”>Style Reset 66 Berlin</span>
<!– Markup for the image, inserted with JS –>
<div class=”hover-reveal”>
<div class=”hover-reveal__inner”>
<div class=”hover-reveal__img” style=”background-image: url(img/1.jpg);”></div>
</div>
</div>
</a>

In order to construct this markup for the image, we need to save the source somewhere. We’ll use a data attribute on the menu__item, e.g. data-img=”img/1.jpg”. We’ll go into more detail later on.

Next, we’ll have some styling for it:

.hover-reveal {
position: absolute;
z-index: -1;
width: 220px;
height: 320px;
top: 0;
left: 0;
pointer-events: none;
opacity: 0;
}

.hover-reveal__inner {
overflow: hidden;
}

.hover-reveal__inner,
.hover-reveal__img {
width: 100%;
height: 100%;
position: relative;
}

.hover-reveal__img {
background-size: cover;
background-position: 50% 50%;
}

Any other styles that are specific to our effect (like the transforms) we’ll add dynamically.

Let’s take a look at the JavaScript.

The JavaScript

We’ll use GSAP and besides our hover animation, we’ll also use a custom cursor and smooth scrolling. For that we’ll use the smooth scroll library from the amazing folks of Locomotive, the Agency of the year. Since those are both optional and out of the scope of the menu effect we want to showcase, we’ll not be covering it here.

First things first: let’s preload all the images. For the purpose of this demo we are doing this on page load, but that’s optional.

Once that’s done, we can initialize the smooth scroll instance, the custom cursor and our Menu instance.

Here’s how the entry JavaScript file (index.js) looks like:

import Cursor from ‘./cursor’;
import {preloader} from ‘./preloader’;
import LocomotiveScroll from ‘locomotive-scroll’;
import Menu from ‘./menu’;

const menuEl = document.querySelector(‘.menu’);

preloader(‘.menu__item’).then(() => {
const scroll = new LocomotiveScroll({el: menuEl, smooth: true});
const cursor = new Cursor(document.querySelector(‘.cursor’));
new Menu(menuEl);
});

Now, let’s create a class for the Menu (in menu.js):

import {gsap} from ‘gsap’;
import MenuItem from ‘./menuItem’;

export default class Menu {
constructor(el) {
this.DOM = {el: el};
this.DOM.menuItems = this.DOM.el.querySelectorAll(‘.menu__item’);
this.menuItems = [];
[…this.DOM.menuItems].forEach((item, pos) => this.menuItems.push(new MenuItem(item, pos, this.animatableProperties)));

…
}
…
}

So far we have a reference to the main element (the menu <nav>
element) and the menu item elements. We’ll also create an array of our MenuItem instances. But let’s cover that bit in a moment.

What we’ll want to do now is to update the transform (both, X and Y translate) value as we move the mouse over the menu items. But we might as well want to update other properties. In our case we will additionally be updating the rotation and the CSS filter value (brightness). For that, let’s create an object that stores this configuration:

constructor(el) {
…

this.animatableProperties = {
tx: {previous: 0, current: 0, amt: 0.08},
ty: {previous: 0, current: 0, amt: 0.08},
rotation: {previous: 0, current: 0, amt: 0.08},
brightness: {previous: 1, current: 1, amt: 0.08}
};
}

With interpolation, we can achieve the smooth animation effect when moving the mouse. The “previous” and “current” values are the values we’ll be interpolating. The current value of one of these “animatable” properties will be one between these two values at a specific increment. The value of “amt” is the amount to interpolate. As an example, the following formula calculates our current translationX value:

this.animatableProperties.tx.previous = MathUtils.lerp(this.animatableProperties.tx.previous, this.animatableProperties.tx.current, this.animatableProperties.tx.amt);

Finally, we can show the menu items, which are hidden by default. This was just a little extra, and totally optional, but it’s definitely a nice add-on to reveal each item with a delay on page load.

constructor(el) {
…

this.showMenuItems();
}
showMenuItems() {
gsap.to(this.menuItems.map(item => item.DOM.textInner), {
duration: 1.2,
ease: ‘Expo.easeOut’,
startAt: {y: ‘100%’},
y: 0,
delay: pos => pos*0.06
});
}

That’s it for the Menu class. What we’ll be looking into next is how to create the MenuItem class together with some helper variables and functions.

So, let’s start by importing the GSAP library (which we will use to show and hide the images), some helper functions and the images inside our images folder.

Next, we need to get access to the mouse position at any given time, since the image will follow along its movement. We can update this value on “mousemove” . We will also cache its position so we can calculate its speed and movement direction for both, the X and Y axis.

Hence, that’s what we’ll have so far in the menuItem.js file:

import {gsap} from ‘gsap’;
import { map, lerp, clamp, getMousePos } from ‘./utils’;
const images = Object.entries(require(‘../img/*.jpg’));

let mousepos = {x: 0, y: 0};
let mousePosCache = mousepos;
let direction = {x: mousePosCache.x-mousepos.x, y: mousePosCache.y-mousepos.y};

window.addEventListener(‘mousemove’, ev => mousepos = getMousePos(ev));

export default class MenuItem {
constructor(el, inMenuPosition, animatableProperties) {
…
}
…
}

An item will be passed its position/index in the menu (inMenuPosition) and the animatableProperties object described before. The fact that the “animatable” property values are shared and updated among the different menu items will make the movement and rotation of the images continuous.

Now, in order to be possible to show and hide the menu item image in a fancy way, we need to create that specific markup we’ve shown in the beginning and append it to the item. Remember, our menu item is this by default:

<a class=”menu__item” data-img=”img/3.jpg”>
<span class=”menu__item-text”><span class=”menu__item-textinner”>Franklin Roth</span></span>
<span class=”menu__item-sub”>Amber Convention London</span>
</a>

Let’s append the following structure to the item:

<div class=”hover-reveal”>
<div class=”hover-reveal__inner” style=”overflow: hidden;”>
<div class=”hover-reveal__img” style=”background-image: url(pathToImage);”>
</div>
</div>
</div>

The hover-reveal element will be the one moving as we move the mouse.
The hover-reveal__inner element together with the hover-reveal__img (the one with the background image) will be the ones that we can animate together to create fancy animations like reveal/unreveal effects.

layout() {
this.DOM.reveal = document.createElement(‘div’);
this.DOM.reveal.className = ‘hover-reveal’;
this.DOM.revealInner = document.createElement(‘div’);
this.DOM.revealInner.className = ‘hover-reveal__inner’;
this.DOM.revealImage = document.createElement(‘div’);
this.DOM.revealImage.className = ‘hover-reveal__img’;
this.DOM.revealImage.style.backgroundImage = `url(${images[this.inMenuPosition][1]})`;
this.DOM.revealInner.appendChild(this.DOM.revealImage);
this.DOM.reveal.appendChild(this.DOM.revealInner);
this.DOM.el.appendChild(this.DOM.reveal);
}

And the MenuItem constructor completed:

constructor(el, inMenuPosition, animatableProperties) {
this.DOM = {el: el};
this.inMenuPosition = inMenuPosition;
this.animatableProperties = animatableProperties;
this.DOM.textInner = this.DOM.el.querySelector(‘.menu__item-textinner’);
this.layout();
this.initEvents();
}

The last step is to initialize some events. We need to show the image when hovering the item and hide it when leaving the item.

Also, when hovering it we need to update the animatableProperties object properties, and make the image move, rotate and change its brightness as the mouse moves:

initEvents() {
this.mouseenterFn = (ev) => {
this.showImage();
this.firstRAFCycle = true;
this.loopRender();
};
this.mouseleaveFn = () => {
this.stopRendering();
this.hideImage();
};

this.DOM.el.addEventListener(‘mouseenter’, this.mouseenterFn);
this.DOM.el.addEventListener(‘mouseleave’, this.mouseleaveFn);
}

Let’s now code the showImage and hideImage functions.

We can create a GSAP timeline for this. Let’s start by setting the opacity to 1 for the reveal element (the top element of that structure we’ve just created). Also, in order to make the image appear on top of all other menu items, let’s set the item’s z-index to a high value.

Next, we can animate the appearance of the image. Let’s do it like this: the image gets revealed to the right or left, depending on the mouse x-axis movement direction (which we have in direction.x). For this to happen, the image element (revealImage) needs to animate its translationX value to the opposite side of its parent element (revealInner element).
That’s basically it:

showImage() {
gsap.killTweensOf(this.DOM.revealInner);
gsap.killTweensOf(this.DOM.revealImage);

this.tl = gsap.timeline({
onStart: () => {
this.DOM.reveal.style.opacity = this.DOM.revealInner.style.opacity = 1;
gsap.set(this.DOM.el, {zIndex: images.length});
}
})
// animate the image wrap
.to(this.DOM.revealInner, 0.2, {
ease: ‘Sine.easeOut’,
startAt: {x: direction.x < 0 ? ‘-100%’ : ‘100%’},
x: ‘0%’
})
// animate the image element
.to(this.DOM.revealImage, 0.2, {
ease: ‘Sine.easeOut’,
startAt: {x: direction.x < 0 ? ‘100%’: ‘-100%’},
x: ‘0%’
}, 0);
}

To hide the image we just need to reverse this logic:

hideImage() {
gsap.killTweensOf(this.DOM.revealInner);
gsap.killTweensOf(this.DOM.revealImage);

this.tl = gsap.timeline({
onStart: () => {
gsap.set(this.DOM.el, {zIndex: 1});
},
onComplete: () => {
gsap.set(this.DOM.reveal, {opacity: 0});
}
})
.to(this.DOM.revealInner, 0.2, {
ease: ‘Sine.easeOut’,
x: direction.x < 0 ? ‘100%’ : ‘-100%’
})
.to(this.DOM.revealImage, 0.2, {
ease: ‘Sine.easeOut’,
x: direction.x < 0 ? ‘-100%’ : ‘100%’
}, 0);
}

Now we just need to update the animatableProperties object properties so the image can move around, rotate and change its brightness smoothly. We do this inside a requestAnimationFrame loop. In every cycle we interpolate the previous and current values so things happen with an easing.

We want to rotate the image and change its brightness depending on the x-axis speed (or distance traveled from the previous cycle) of the mouse. Therefore we need to calculate that distance for every cycle which we can get by subtracting the mouse position from the cached mouse position.

We also want to know in which direction we move the mouse since the rotation will be dependent on it. When moving to the left the image rotates negatively, and when moving to the right, positively.

Next, we want to update the animatableProperties values. For the translationX and translationY, we want the center of the image to be positioned where the mouse is. Note that the original position of the image element is on the left side of the menu item.

The rotation can go from -60 to 60 degrees depending on the speed/distance of the mouse and its direction. Finally the brightness can go from 1 to 4, also depending on the speed/distance of the mouse.

In the end, we take these values together with the previous cycle values and use interpolation to set up a final value that will then give us that smooth feeling when animating the element.

This is how the render function looks like:

render() {
this.requestId = undefined;

if ( this.firstRAFCycle ) {
this.calcBounds();
}

const mouseDistanceX = clamp(Math.abs(mousePosCache.x – mousepos.x), 0, 100);
direction = {x: mousePosCache.x-mousepos.x, y: mousePosCache.y-mousepos.y};
mousePosCache = {x: mousepos.x, y: mousepos.y};

this.animatableProperties.tx.current = Math.abs(mousepos.x – this.bounds.el.left) – this.bounds.reveal.width/2;
this.animatableProperties.ty.current = Math.abs(mousepos.y – this.bounds.el.top) – this.bounds.reveal.height/2;
this.animatableProperties.rotation.current = this.firstRAFCycle ? 0 : map(mouseDistanceX,0,100,0,direction.x < 0 ? 60 : -60);
this.animatableProperties.brightness.current = this.firstRAFCycle ? 1 : map(mouseDistanceX,0,100,1,4);

this.animatableProperties.tx.previous = this.firstRAFCycle ? this.animatableProperties.tx.current : lerp(this.animatableProperties.tx.previous, this.animatableProperties.tx.current, this.animatableProperties.tx.amt);
this.animatableProperties.ty.previous = this.firstRAFCycle ? this.animatableProperties.ty.current : lerp(this.animatableProperties.ty.previous, this.animatableProperties.ty.current, this.animatableProperties.ty.amt);
this.animatableProperties.rotation.previous = this.firstRAFCycle ? this.animatableProperties.rotation.current : lerp(this.animatableProperties.rotation.previous, this.animatableProperties.rotation.current, this.animatableProperties.rotation.amt);
this.animatableProperties.brightness.previous = this.firstRAFCycle ? this.animatableProperties.brightness.current : lerp(this.animatableProperties.brightness.previous, this.animatableProperties.brightness.current, this.animatableProperties.brightness.amt);

gsap.set(this.DOM.reveal, {
x: this.animatableProperties.tx.previous,
y: this.animatableProperties.ty.previous,
rotation: this.animatableProperties.rotation.previous,
filter: `brightness(${this.animatableProperties.brightness.previous})`
});

this.firstRAFCycle = false;
this.loopRender();
}

I hope this has been not too difficult to follow and that you have gained some insight into constructing this fancy effect.

Please let me know if you have any question @codrops or @crnacura.

Thank you for reading!

The images used in the demo are by Andrey Yakovlev and Lili Aleeva. All images used are licensed under CC BY-NC-ND 4.0

The post Creating a Menu Image Animation on Hover appeared first on Codrops.

Original Source: https://www.hongkiat.com/blog/invoice-freelance-clients-professionally/

Let’s face it – while receiving money can be very addictive, invoicing is a total nightmare for freelancers, especially designers. However, the freelance business’s truth is that…

Visit hongkiat.com for full content.

Original Source: https://www.sitepoint.com/react-interview-questions-solutions/?utm_source=rss

React’s popularity shows no sign of waning, with the demand for developers still outstripping the supply in many cities around the world. For less-experienced developers (or those who’ve been out of the job market for a while), demonstrating your knowledge at the interview stage can be daunting.

In this article, we’ll look at fifteen questions covering a range of knowledge that’s central to understanding and working effectively with React. For each question, I’ll summarize the answer and give links to additional resources where you can find out more.

1. What’s the virtual DOM?
Answer

The virtual DOM is an in-memory representation of the actual HTML elements that make up your application’s UI. When a component is re-rendered, the virtual DOM compares the changes to its model of the DOM in order to create a list of updates to be applied. The main advantage is that it’s highly efficient, only making the minimum necessary changes to the actual DOM, rather than having to re-render large chunks.

Further reading

Understanding the Virtual DOM
Virtual DOM Explained

2. What’s JSX?
Answer

JSX is an extension to JavaScript syntax that allows for writing code that looks like HTML. It compiles down to regular JavaScript function calls, providing a nicer way to create the markup for your components.

Take this JSX:

<div className=”sidebar” />

It translates to the following JavaScript:

React.createElement(
‘div’,
{className: ‘sidebar’}
)

Further reading

What is JSX?
JSX in Depth
JSX in React Design Patterns and Best Practices

3. What’s the difference between a class component and a functional one?
Answer

Prior to React 16.8 (the introduction of hooks), class-based components were used to create components that needed to maintain internal state, or utilize lifecycle methods (i.e. componentDidMount and shouldComponentUpdate). A class-based component is an ES6 class that extends React’s Component class and, at minimum, implements a render() method.

Class component:

class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

Functional components are stateless (again, < React 16.8) and return the output to be rendered. They are preferred for rendering UI that only depends on props, as they’re simpler and more performant than class-based components.

Functional component:

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

Note: the introduction of hooks in React 16.8 means that these distinctions no longer apply (see questions 14 and 15).

Further reading

Functional Components vs Class Components in React
Functional vs Class-Components in React

4. What are keys used for?
Answer

When rendering out collections in React, adding a key to each repeated element is important to help React track the association between elements and data. The key should be a unique ID, ideally a UUID or other unique string from the collection item, but which can be an array index as a last resort:

<ul>
{todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
)};
</ul>

Not using a key can result in strange behavior when adding and removing items from the collection.

Further reading

Lists and Keys
Understanding React’s key prop

5. What’s the difference between state and props?
Answer

props are data that are passed into a component from its parent. They should not be mutated, but rather only displayed or used to calculate other values. State is a component’s internal data that can be modified during the lifetime of the component, and is maintained between re-renders.

Further reading

props vs state

6. Why call setState instead of directly mutating state?
Answer

If you try to mutate a component’s state directly, React has no way of knowing that it needs to re-render the component. By using the setState() method, React can update the component’s UI.

Bonus

As a bonus, you can also talk about how state updates are not guaranteed to be synchronous. If you need to update a component’s state based on another piece of state (or props), pass a function to setState() that takes state and props as its two arguments:

this.setState((state, props) => ({
counter: state.counter + props.increment
}));

Further reading

Continue reading
15 React Interview Questions with Solutions
on SitePoint.