figma’s-features-for-the-entire-design-process

The world of emerging design tools is incredibly exciting. Promising new programs are being launched in rapid succession, but there is one in particular that has slowly become the best choice for bigger and mostly distributed design teams.

Figma has the potential to support the entire design process end to end. First sketches, feedback collection, collaboration, ready-to-test prototypes, and developer handoff are well within its capabilities. Figma also simplifies the work of product managers and design leads, as well as all other stakeholders.

So, what sets Figma apart from the competition? There are several key aspects, but all of them can be traced back to the fact that Figma is web-based. This raised a lot of eyebrows when the tool was first released, but ultimately, it paved the way for Figma’s flexibility and unique functionalities.

Figma features include design, prototyping, collaboration, design systems, and plugins

What Is Fundamental to a Smooth Product Design Process?

While it’s true that each team and project may have a different workflow, there are functions and phases that are essential components of product design and management. Figma covers each.

  1. Accessibility and collaboration. No matter the tools a team uses, there needs to be a way to work together, present projects, gather feedback, and keep stakeholders in the loop. All of these features are available in Figma.
  2. Flexibility to iterate and produce deliverables. Figma is flexible and can be used as a collaborative whiteboard for sketching initial ideas and iterating everything from wireframes to high-fidelity mockups.
  3. Ability to build prototypes and test. Designing a mobile app? Build and publish interactive prototypes and test them directly on smartphones–all from Figma.
  4. Establishing a single source of truth. Figma is an excellent way to define product design systems that reside completely online. It’s a single source of truth by default. No more wondering, “Is this the latest version?”
  5. Smooth handoff. Just share a link with developers, and they’ll have access to all the information needed to implement the design–redlines, measurements, and graphic assets ready to be exported.
  6. Versatility to be customized and improved. Figma’s plugin API allows teams to write their own plugins or tap into the broader user community and extend the tool with new functionalities.

1. Accessibility and Collaboration

Get the Team on Board

Let’s take a closer look at how Figma contributes to the six key areas covered above. New users may want to create a free Figma account, set up a team, and watch get started with Figma. Once a team is created, invite team members and relevant stakeholders to join.

Figma tutorial

There are three access levels available. It’s fairly self-explanatory, but usually, edit rights are given to the design team and view rights to everyone else. This includes developers and other stakeholders who need to be able to follow the design process and provide feedback.

Figma prototype

Similar sharing options are available at the team level (shown above), project level, and file level. If access levels aren’t specified, they propagate from team to project and from project to files.

Since Figma is available in the browser, it doesn’t matter how someone is invited or what system they are on. As long as the device and browser they use meet the minimum requirements, they can jump right in with a link, and the interface changes according to whether they have edit or view rights.

Embedding a Project File

Figma project files can be embedded in third-party software. For example, a shared Dropbox Paper document may be used to present the current state of a project.

To embed project files, set the file visibility to Anyone with the link – can view, copy the embed code, and embed the project file in any third-party software that supports embed.ly.

Figma version control

Feedback and Revisions

Another key functionality for the product design process is the ability to distribute designs, collect feedback, and manage revisions. Anyone with a Figma link can see the latest version and comment directly on the point they want to give feedback about.

Figma animation

To tag team members, use the @ character, and the system will present a list of names to choose from. Doing so notifies team members, and once feedback has been processed, discussions can be closed by clicking on Resolve.

Figma app

To keep teams aligned, there is a nice integration that can publish discussion from Figma files in a designated Slack channel.

Real Real-time Collaboration

One of the more intriguing functionalities of Figma is what they call multiplayer. It allows multiple team members to open and work on a design file at the same time. Everyone working on the file is visible on the top right of the page, and their avatars are named and clickable.

It can take some time to appreciate what this means in practical terms. While it’s unlikely that designers will use multiplayer to simultaneously work on the same part of a file, it’s incredibly comforting to not have to worry about file version conflict, especially for bigger distributed teams.

Multiplayer comes in handy when presenting remotely because it makes it possible for everyone connected to the file to follow the viewport of the presenter. It also allows teams to bypass additional programs and use Figma as an online whiteboard (though specific solutions, like Miro, may ultimately be better suited for the job).

To this end, it is advisable to create custom components to replicate specific assets as virtual post-it notes or diagram elements.

2. The Flexibility to Iterate and Produce Deliverables

Once team members have been invited and initial sketches are underway, Figma can be used to iterate. The main reason that Figma was created is interface design—with whiteboarding finished, teams may move to flow maps and wireframes. Again, it’s smart to build component libraries that can be reused for these tasks. The official templates collection provides inspiration and design arrangements to start from.

3. The Ability to Build Prototypes and Test

It is quite easy to create interactive prototypes with Figma. When a Figma file is open with editing rights, it is possible to switch between design and prototyping mode. Once in prototype mode, it is possible to click on an element to make it interactive, whether from the stage or the layers sidebar.

Figma archetype

With an element selected in Prototype mode, a small circle appears on the side. When dragged, blue lines appear, and it can be dropped on the screen or state to show the result of the interaction.

Figma design

Common transitions are available in Figma, making it much easier to create high-fidelity prototypes. In fact, the Figma team recently released a smart animate and drag trigger feature. The smart animate aspect interpolates the motion of similar elements, while drag trigger is a new type of interaction. Both drastically improve the quality of interactive prototypes.

User Testing

Again, a link is all that’s needed to distribute Figma prototypes, even for user testing. Clicking on the small play icon on the top right launches the prototype, and a new URL is generated. It’s possible to copy the URL or use the blue Share Prototype button. Once users open the link, they are presented with an interactive prototype and able to leave comments if desired.

Testing on Mobile

Designs for mobile devices are presented with a mockup of an actual device surrounding the prototype. If more realism is needed to test interaction, it’s best to download the Figma Mirror app for device-specific testing.

4. Establishing a Single Source of Truth

Version History

Wouldn’t it be great if project files were always current and constantly backed up? This functionality is included in Figma by default. Each file is saved automatically while working on it, and Figma creates a new entry in the version history after 30 minutes of inactivity. A log of all automatically saved versions is created, and each version can be restored if needed.

Figma design tool

Of course, automatic versioning isn’t the only option for saving work. It is possible to save a version manually or edit a specific version in the version history.

Figma how to prototype

Design Systems and Component Libraries

Another aspect where Figma shines is how it lets designers create, organize, and distribute component libraries. Any file can be published as a library, and every color, text style, effect, grid, or component is available to be used in other Figma files.

Figma prototype

When changes are made to any element in a library, edits can be published and propagated to files that use those elements. Designers working on these files can then decide to accept edits or not.

The ability to decide how to distribute libraries, combined with the option to toggle the visibility or invisibility of library elements, makes the whole experience smooth and powerful.

Components and libraries can be nested to create sophisticated design systems where everything is versioned and up to date for everyone involved. And all components can be annotated with comments.

5. Smooth Handoff

Developer Handoff

With Figma, designers and developers don’t need a separate tool, like Zeplin, to manage handoff. They can simply open files and switch to Code mode in the right sidebar, even with view-only access.

Figma UI design

When Code mode is active, selecting an element on the stage will reveal all relevant information needed for implementation, and all other information regarding component position in relation to other elements is visible. As with similar solutions, the generated code is not meant to be entirely copy-pasted, but it’s helpful to have such easy access.

Figma UI elements

6. The Versatility to Be Customized and Improved

Figma APIs and Custom Plugins

Figma’s API and plugin system make it easy for a wide range of design teams and disciplines to customize the program for their specific process needs. Figma’s flexibility gives users the ability to programmatically interact with the platform. A few examples:

Using Real Data

It’s immensely valuable to be able to use real data in mockups and prototypes, and Figma makes it possible by allowing content from external sources to be imported. By leveraging real content, it’s possible to stress-test design components, keep mockups current, and involve teams that are not design-related.

A plugin named Google Sheets Sync is a perfect example of what can be done. This plugin makes it simple to integrate Google Sheets as a source to populate and sync the content of components in Figma files.

Advanced Workflows

The ability to house a design system within a UI design program is only valuable if the system is consistently implemented in customer-facing screens. Thankfully, there are Figma APIs, plugins, and integrations that can help.

The Storybook addon syncs Figma files and shows Figma-design components in a panel alongside implemented components. Another interesting use case is the Figma to React Converter, a workflow enhancement that converts Figma components into code.

Prototyping with Figma: A Figma to React Converter
Using the Figma to React Converter to update the style on a sortable list.

Figma’s Features Are Ideal for the Entire Design Process

There’s no single design program that can handle the needs of every designer or design problem, and that’s a good thing. Competition among design tools is advantageous to designers. It ensures that the companies that make our tools listen to what we need and provide us with up-to-date features fit for the jobs we do.

That said, Figma is an advanced yet intuitive tool that has proven itself more than capable of tackling the entire digital design process. Individual designers and teams alike can benefit from its unique collaboration and iteration features, and where the program falls short, a huge selection of plugins fills the void.

• • •

Further reading on the Toptal Design Blog:

litmus-adds-key-features-to-email-marketing-platform

Email marketing provider Litmus has added several key features to its redesigned platform with more capabilities and improved workflows. The release includes new testing capabilities, email client insights and an upgraded Trello integration for managing email workflows.

In late October, Litmus debuted its redesigned email platform. With the refresh, users can now “create an email once and then easily toggle between tools without having to re-upload your email every single time you’d like to use a different tool,” the company said.  

Why we should care

These new features could have a significant impact on how users design, test, approve and send emails —  processes that, in some organizations, can take hours or even days. The redesign makes it easier to store and find project folders with flexible organizational structures to fit users’ needs. Multiple project status overviews can now be found in a centralized location via the new email Summary view that lets users set due dates, descriptions and update statuses for each email project. 

Reviewing and approving email designs can be a painful, laborious process. Our latest research shows that the graphics and design stage of the email workflow can take an average of 4.1 hours to complete—and if you’re a larger team, it can take an average of 6 hours,” said Litmus.

The List Chrome Extension also got an update, now allowing users to test dynamic content in Salesforce Marketing Cloud, Marketo and Responsys.

The extension allows email marketers to ensure that dynamic content and personalization are rendering properly across your subscribers’ devices.

Email clients and devices are constantly changing, and email marketers risk poor performance and negative subscriber experiences if they are not testing across different devices. The Email Client Recommendations in Litmus Checklist provides live insights into the clients and devices your subscribers are using in order to help marketers serve viewer-optimized emails.

More on the news

  • Litmus Proof allows users to collect feedback in a single place. Proof now supports both PNG and JPEG files in addition to HTML.
  • The updated Trello integration allows users to attach Litmus emails to Trello cards in order to streamline the workflow in one solution. Emails can be created from a card in Trello, and changes to the email made in Litmus will be reflected on the related Trello card.

More about the Managed Inbox



About The Author

Jennifer Videtta Cannon serves as Third Door Media’s Senior Editor, covering topics from email marketing and analytics to CRM and project management. With over a decade of organizational digital marketing experience, she has overseen digital marketing operations for NHL franchises and held roles at tech companies including Salesforce, advising enterprise marketers on maximizing their martech capabilities. Jennifer formerly organized the Inbound Marketing Summit and holds a certificate in Digital Marketing Analytics from MIT Sloan School of Management.



what-we-shipped:-10-new-features-and-updates-to-make-using-intercom-even-easier

Over the past few months, we have been hard at work updating and creating new features that make Intercom even more effective for everyone.

From new navigation features and refreshed product names to several brand new apps, there’s definitely something for everyone. Let’s take a look at some of the top releases of the past few months.

Introducing Outbound


There are a lot of different ways to interact with your visitors and customers using Intercom, and we know from your feedback that sometimes it could be hard to choose the most appropriate variety of message to use. That’s why we made a number of changes and updates to make everything much more intuitive for you.

“Messages is now called Outbound because it’s home to more than just messages”

Most significantly, Messages is now called Outbound because it’s home to more than just messages. For instance, this is where you will now find Product Tours. Operator and Reports have moved to the main group of options in the left menu, so the features you use most often are all together in one place. Your outbound content is now grouped by type as well, so you can view tours and messages together for a clear picture of what you send your users.

There are no longer “visitor auto messages” or “user auto messages”.  Auto messages are now simply called “ongoing messages”, and manual messages are called “one-off messages”. Just create your message, and then select the types of people you’d like to receive it under “Choose your audience”.

You will also notice that the sidebar and menu has been updated to create an easy-to-navigate, consolidated Outbound home. This update brings your outbound content into a single place, makes it easier to send tours and messages, and offers more flexibility in how you organize your content.

Intercom Outbound home

And finally, organization is key, so folders have been upgraded to tags. Instead of putting messages and tours in a folder, you can simply tag them. Plus, a single tour or message can have multiple tags, instead of being limited to a single folder. This allows you more flexibility to organize your outbound content.

Bot updates

As well as making your Outbound home more intuitive and streamlined, we also made a ton of updates to our bot capabilities in recent months. So let’s take a look at some of the significant updates to bots and what this means for you.

Answer Bot for ongoing messages

We know that, when it comes to support, having a fast response time makes for a much better customer experience.  But helping customers faster can be difficult when you’re strapped for resources.

“You can now increase Answer Bot coverage by using it to reply to new conversations from your ongoing messages”

That’s where Answer Bot comes in. With the latest update, you can now increase Answer Bot coverage by using it to reply to new conversations from your ongoing messages. This will allow Answer Bot to cover the most common questions, freeing up your time for more complex customer support needs

Intercom Answer Bot

Answer targeting for Answer Bot

We know that you have a ton of different kinds of customers and, naturally, those customers can have a wide range of questions. But the answers you provide will vary based on the language you’re responding in, whether your customer is using iOS or Android, subscription levels, and much more.

“You can now make responses to your customers even more personal by limiting answers to specific audience segments”

We want to give you more power and control over Answer Bot, so we’ve added our second new Answer Bot feature – answer targeting. You can now make responses to your customers even more personal by limiting answers to specific audience segments when using Answer Bot. To get started with answer targeting, all you have to do is add the unique criteria or set of attributes to each answer you create.

Intercom Answer botMid-path actions for Custom Bots

We knew Custom Bots needed to be more flexible, specifically when it comes to taking actions like tagging or assigning conversations before the user has reached the end of their interaction. Drop-off happens, and not everyone reaches the end of a bot flow, so we wanted to let Custom Bots take action as soon as the right information was collected.

To do so, we added mid-path actions, which are designed to help Custom Bots guide people to the right outcome, faster.

For example, you can now qualify a lead and assign them based on how they respond, or you can send the meeting scheduler app and then follow-up with a thank you message or more relevant content to keep the lead warm. 

Mid path actions Intercom Custom Bots

Custom Bot path analysis 

Path analysis allows you to see how people are flowing through your Custom Bots and where they’re dropping off to better understand performance.

Use these new insights to make optimizations to further drive engagement. Just navigate to any live Custom Bot and click on the new “path analysis” tab to check it out for yourself.

Intercom Custom Bots path analysis

Inbound Custom Bots

We recently released the ability to triage new conversations with Custom Bots before your customers are passed to a member of your team. We’ve now expanded that release even further to enable you to decide whether all visitors and users must go through triage before they can initiate a new conversation. This lets you collect helpful information for every conversation and route it to the right team or teammate.

For example, you can have users select between wanting to get in touch with support, sales, report a bug, or request a feature before they’re able to compose and send their message. After their initial interaction with the Custom Bot, the message composer will re-appear.

Intercom Inbound Custom Bots

Tagging and reporting

It’s now easier than ever to draw better insights from your conversations through our latest tagging and reporting updates, so you can improve your product and business.

Tags settings

We’ve created the new tags settings page, which is now the central location for you to view and manage all of your tags. You’ll even be able to see how many times your tags were used from here.

Tag rules

We’ve also introduced new rules to help you automatically tag new conversations. This will help you ensure your tag reports are more accurate while also reducing the manual effort for your teams

Tagging for Custom Bots

Finally, we’re also extending tagging to Custom Bots, so you can now gain insight into the content in your conversations.

Reports for response times and closed conversations

Now you can get a breakdown of both first response and close times for any team or teammate that you select. You know that your team’s time to resolution will directly impact how customers rate your conversations, so having these details helps you to optimize your performance or even just understand what is happening in your inbox.

If your company has been using SLA targets for first response and next response times, we have also updated SLA rules so that you can set a time target as low as 30 seconds. You can set this up by going to your inbox, selecting automation, and then setting your SLA rules there.

Apps

Here are some of our favorite apps other people have been building on Intercom:

Chili Piper

Book more sales meetings with advanced routing and scheduling.

Chili Piper app for Intercom

The Chili Piper app makes it easy to schedule meetings with your prospects and customers, right from your Intercom inbox. Plus, Chili Piper’s advanced routing and scheduling ensures that meetings are routed to the right teams and fairly distributed across team members – giving your prospects and customers a seamless experience.  

Install from the App Store, or find out more here.

Prodsight

Automatically tag conversations and run sentiment analysis.

Prodsight app for Intercom

The Prodsight app makes it easy to stay on top of customer issues and requests by automatically analyzing your conversations for topics and sentiment and producing a continuously updated report on the most common user issues.  

Install from the App Store, or find out more here.

SessionStack

Speed up support with interactive co-browsing.

SessionStack app for Intercom

The SessionStack app lets your support team initiate an interactive co-browsing session with a click of a button directly from Intercom. You can view, guide or take control of your customer’s screen to see exactly what the problem is – cutting the back-and-forth and giving you the context you need to provide fast, personal assistance. 

Install from the App Store, or find out more here.

Rybbon

Delight your leads and customers with digital rewards.

The Rybbon app enables you to send digital rewards and gifts directly via the Intercom Messenger. Recognize customer milestones, reward prospects for attending sales demos, offer “thank you” gifts to survey respondents, and more! 

Install from the App Store, or find out more here.

To keep up to date with the latest updates and changes, check out our full changelog here.


Ad_6_1200x628

the-new-features-of-gsap-3

Learn about all the exciting new features of GSAP 3 in this easy-to-follow overview.

GSAP3

From our monthly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

In this article we will explore many of the new features available from GSAP 3. The GreenSock animation library is a JavaScript library many front-end developers turn to because it can be easy to get started and you can create powerful animations with a lot of control. Now with GSAP 3 getting started with GreenSock is even easier.

Some of the new features we will cover in this article are:

  • GreenSock’s smaller file size
  • A Simplified API which offers a newer syntax
  • Defaults in timelines
  • Easier to use with build tools and bundlers
  • Advanced stagger everywhere!
  • Keyframes
  • MotionPath and MotionPath plugin
  • use of Relative “>” and “<” position prefix in place of labels in Timelines
  • The new “effects” extensibility
  • Utility methods

…and more!

GreenSock’s smaller file size

First and foremost the GreenSock library is now even smaller. It still packs all the amazing features I love, plus more (50 more to be exact). But it is now about half the size! We will see some of the reasons below like the new simplified API but at its core GSAP was completely rebuilt as modern ES modules.

A Simplified API

With the new version of GreenSock we no longer have to decide whether we want to use TweenMax, TweenLite, TimelineMax, or TimelineLite. Now, everything is in a single simplified API so instead of code that looks like this:

TweenMax.to('.box', 1, {
  scale: 0.5,
  y: 20,
  ease: Elastic.easeOut.config( 1, 0.3)
})

We can write this instead:

gsap.to(".box1",{
  duration: 1,
  scale: 0.5,
  y: 20     // or you can now write translateY: 20,
  ease: "elastic(1, 0.3)",
});

Creating Timelines is easier too. Instead of using new TimelineMax() or new TimelineLite() to create a timeline, you now just use gsap.timeline() (simpler for chaining).

Here is an example of the first syntax change. Note that the old syntax still works in GSAP 3 for backward compatibility. According to GreenSock, most legacy code still works great.

See the Pen GreenSock New vs Old syntax by Christina Gorton (@cgorton) on CodePen.dark

Duration

Previously, the animation’s duration was defined as its own parameter directly after the target element. Like this:

TweenMax.to('.box', 1, {})

With the new version, duration is defined in the same vars object as the rest of the properties you animate and therefore is more explicit.

gsap.to(".box",{
  duration: 2,
});

This adds several benefits such as improved readability. After working with and teaching GSAP for a while now, I agree that having an explicit duration property is helpful for anyone new to GreenSock and those of us who are more experienced. This isn’t the only thing the new API improves though. The other benefits will become more obvious when we look at defaults in timelines and the new Keyframes.

Defaults in timelines

This new feature of GSAP is really wonderful for anyone who creates longer animations with gsap.timeline(). In the past when I would create long animations I would have to add the same properties like ease, duration, and more to each element I was animating in a timeline. Now with defaults I can define default properties that will be used for all elements that are animated unless I specify otherwise. This can greatly decrease the amount of code you are writing for each timeline animation.

Let’s take a look at an example:

This Pen shows a couple of the new features in GSAP 3 but for now we will focus on the defaults property.

See the Pen Quidditch motionPath by Christina Gorton (@cgorton) on CodePen.dark

I use defaults in a few places in this pen but one timeline in particular shows off its power. At the beginning of this timeline I set defaults for the duration, ease, yoyo, repeat, and the autoAlpha property. Now instead of writing the same properties for each tween I can write it one time.

const moving = () => {
  let tl = new gsap.timeline({ 
    defaults: { 
      duration: .02,  
      ease: "back(1.4)", 
      yoyo: true, 
      repeat: 1, 
      autoAlpha: 1 
    }
  })
  tl.to('.wing1',{})
    .to('.wing2',{})
    .to('.wing3',{})
  
  return tl;
}

Without the defaults my code for this timeline would look like this:

const moving = () => {
  let tl = gsap.timeline()
  
  tl.to('.wing1',{
    duration: .02,  
    ease: "back(1.4)", 
    yoyo: true, 
    repeat: 1, 
    autoAlpha: 1
  })
  .to('.wing2',{
    duration: .02,  
    ease: "back(1.4)", 
    yoyo: true, 
    repeat: 1, 
    autoAlpha: 1
  })
  .to('.wing3',{
    duration: .02,  
    ease: "back(1.4)", 
    yoyo: true, 
    repeat: 1, 
    autoAlpha: 1
  })

  return tl;
}

That is around a 10 line difference in code!

Use of Relative > and < position prefix in place of labels in Timelines

This is another cool feature to help with your timeline animations. Typically when creating a timeline I create labels that I then use to add delays or set the position of my Tweens.

As an example I would use tl.add() to add a label then add it to my tween along with the amount of delay I want to use relative to that label.

The way I previously used labels would look something like this:

gsap.timeline()
  .add("s")
  .to(“.box1", { ... }, "s")
  .to(“.box2", { ... }, "s")
  .to(“.box3", { ... }, "s =0.8")
  .to(“.box4", { ... }, "s =0.8”);

See an example here.

With > and < you no longer need to add a label.

From the GreenSock docs:

“Think of them like pointers – “” points to the end (of the most recently-added animation).”

  • “>” references the most recently-added animation’s END time

So now a timeline could look more like this:

gsap.timeline()
  .to(“.box1", { ... })
  .to(“.box2", { ... }, "

And you can offset things with numbers like I do in this example:

See the Pen MotionPath GreenSock v3 by Christina Gorton (@cgorton) on CodePen.dark

Stagger all the things

Previously in GSAP to stagger animations you had to define it at the beginning of a tween with either a staggerTo(), staggerFrom(), or staggerFromTo() method. In GSAP 3 this is no longer the case. You can simply define your stagger in the vars object like this:

tl.to(".needle",{
  scale: 1,
  delay:0.5,
  stagger: 0.5 //simple stagger of 0.5 seconds
},"start =1")

…or for a more advanced stagger you can add extra properties like this:

tl.to(".needle",{
  scale: 1,
  delay:0.5,
  stagger: {
    amount: 0.5, //  the total amount of time (in seconds) that gets split up among all the staggers. 
    from: "center" // the position in the array from which the stagger will emanate
  }
},"start =1")

This animation uses staggers in several places. like the needles. Check out all the staggers in this pen:

See the Pen Cute Cactus stagger by Christina Gorton (@cgorton) on CodePen.dark

Easier to use with build tools and bundlers

When I have worked on Vue or React projects in the past working with GreenSock could be a little bit tricky depending on the features I wanted to use.

For example in this Codesandbox I had to import in TweenMax, TimelineMax and any ease that I wanted to use.

import { TweenMax, TimelineMax, Elastic, Back} from "gsap";

Now with GSAP 3 my import looks like this:

import gsap from "gsap";

You no longer have to add named imports for each feature since they are now in one simplified API. You may still need to import extra plugins for special animation features like morphing, scrollTo, motion paths, etc.

Keyframes

If you have ever worked with CSS animations then keyframes will be familiar to you.

So what are keyframes for in GreenSock?

In the past if you wanted to animate the same set of targets to different states sequentially (like “move over, then up, then spin”), you would need to create a new tween for each part of the sequence. The new keyframes feature lets us do that in one Tween!

With This property you can pass an array of keyframes in the same vars objects where you typically define properties to animate and the animations will be nicely sequenced. You can also add delays that will either add gaps (positive delay) or overlaps (negative delay).

Check out this example to see the keyframes syntax and the use of delays to overlap and add gaps in the animation.

See the Pen GreenSock Keyframes by Christina Gorton (@cgorton) on CodePen.dark

MotionPath and MotionPath helper plugin

One of the features I am most excited about is MotionPathPlugin and the MotionPathHelper. In the past I used MorphSVGPlugin.pathDataToBezier to animate objects along a path. Here is an example of that plugin:

See the Pen MorphSVGPlugin.pathDataToBezier with StaggerTo and Timeline by Christina Gorton (@cgorton) on CodePen.dark

But the MotionPathPlugin makes it even easier to animate objects along a path. You can create a path for your elements in two ways:

  • With an SVG path you create
  • Or with manual points you define in your JavaScript

The previous Quidditch pen I shared uses MotionPathPlugin in several places. First you need to register it like this:

//register the plugin
gsap.registerPlugin(MotionPathPlugin);

Note: the MotionPathHelper plugin is a premium feature of GreenSock and is available to Club GreenSock members but you can try it out for free on CodePen.

I used an SVG editor to create the paths in the Quidditch animation and then I was able to tweak them directly in the browser with the MotionPathHelper! The code needed to add the MotionPathHelper is this

MotionPathHelper.create(element)

Screen Shot 2019-11-13 at 4.52.09 PM

I then clicked “COPY MOTION PATH” and saved the results in variables that get passed to my animation(s).

Paths created with the MotionPathPlugin helper

const path = "M-493.14983,-113.51116 C-380.07417,-87.16916 -266.9985,-60.82716 -153.92283,-34.48516 -12.11783,-77.91982 129.68717,-121.35449 271.49217,-164.78916 203.45853,-70.96417 186.21594,-72.24109 90.84294,-69.64709   ",
      path2 ="M86.19294,-70.86509 C64.53494,-36.48609 45.53694,-13.87709 -8.66106,-8.17509 -23.66506,-40.23009 -30.84506,-44.94009 -30.21406,-88.73909 6.79594,-123.26109 54.23713,-91.33418 89.94877,-68.52617 83.65113,-3.48218 111.21194,-17.94209 114.05694,18.45191 164.08394,33.81091 172.43213,34.87082 217.26913,22.87582 220.68213,-118.72918 95.09713,-364.56718 98.52813,-506.18118  ",
      path3 = "M-82.69499,-40.08529 C-7.94199,18.80104 66.81101,77.68738 141.56401,136.57371 238.08201,95.81004 334.60001,55.04638 431.11801,14.28271 ",
      path4 = "M126.51311,118.06986 C29.76678,41.59186 -66.97956,-34.88614 -163.72589,-111.36414 -250.07922,-59.10714 -336.43256,-6.85014 -422.78589,45.40686 ";

Example of a path passed in to animation

const hover = (rider, path) => {
  let tl = new gsap.timeline();
  tl.to(rider, {
    duration: 1,
    ease: "rider",
    motionPath:{
      path: path,
    }
  })
  return tl
}

In this timeline I set up arguments for the rider and the path so I could make it reusable. I add which rider and which path I want the rider to follow in my master timeline.

.add(hover("#cho", path3),'start =0.1')
.add(hover("#harry", path4),'start =0.1')

If you want to see the paths and play around with the helper plugin you can uncomment the code at the bottom of the JavaScript file in this pen:

See the Pen Quidditch motionPath by Christina Gorton (@cgorton) on CodePen.dark

Or, in this pen you can check out the path the wand is animating on:

See the Pen MotionPath GreenSock v3 by Christina Gorton (@cgorton) on CodePen.dark

Effects

According the the GreenSock Docs:

Effects make it easy for anyone to author custom animation code wrapped in a function (which accepts targets and a config object) and then associate it with a specific name so that it can be called anytime with new targets and configurations

So if you create and register an effect you reuse it throughout your codebase.

In this example I created a simple effect that makes the target “grow”. I create the effect once and can now apply it to any element I want to animate. In this case I apply it to all the elements with the class “.box”

See the Pen GreenSock Effects by Christina Gorton (@cgorton) on CodePen.dark

Utility methods

Lastly, I’ll cover the utility methods which I have yet to explore extensively but they are touted as a way to help save you time and accomplish various tasks that are common with animation.

For example, you can feed any two similarly-typed values (numbers, colors, complex strings, arrays, even multi-property objects) into the gsap.utils.interpolate() method along with a progress value between 0 and 1 (where 0.5 is halfway) and it’ll return the interpolated value accordingly. Or select a random() value within an array or within a specific range, optionally snapping to whatever increment you want.

Most of the 15 utility methods that can be used separately, combined, or plugged directly into animations. Check out the docs for details.

Below I set up one simple example using the distribute() utility which:

Distributes an amount across the elements in an array according to various configuration options. Internally, it’s what advanced staggers use, but you can apply it for any value. It essentially assigns values based on the element’s position in the array (or in a grid)

See the Pen GreenSock Utility Methods by Christina Gorton (@cgorton) on CodePen.dark

For an even more impressive example check out Craig Roblewsky’s pen that uses the distribute() and wrap() utility methods along with several other GSAP 3 features like MotionPathPlugin:

See the Pen MotionPath Distribute GSAP 3.0 by Craig Roblewsky (@PointC) on CodePen.dark

That wraps up the features we wanted to cover in this article. For the full list of changes and features check out this page and the GreenSock docs. If you’d like to know what old v2 code isn’t compatible with v3, see GreenSock’s list. But there’s not much as GSAP 3 is surprisingly backward-compatible given all the improvements and changes.

References

All of the Pens from this article can be found in this collection.

For more examples check out GreenSock’s Showcase and Featured GSAP 3 Pens collection.

bugs-that-became-features

When Silent Hill was being developed, game consoles weren’t powerful enough to show all the objects on the screen at the same time.

The team decided to render only the part of the environment close to the player, which was a great solution, but it had a problem – as the player moved you could see the objects popping up on the screen, which didn’t feel very nice, of course.

That’s how an idea of introducing the fog came around – so that way the player couldn’t see faraway objects being rendered.

Even though gaming consoles got better with time and the fog wasn’t technically needed any more, it was decided to keep it anyway, as it became a defining part of the gaming experience.

Source: Air Entertainment

Parth Bari

iOS 12 is here — A good news for both, the iPhone users and iOS Developers. This latest iOS was released just a few weeks back, entered with stacks of mind-blowing features. Including enhanced machine learning abilities, a new mode for the notifications, iOS 12 offers a new approach for each iOS App Development.

The Heighten Performance of iOS 12 is breaking all the barriers:

  • iOS 12 came with faster performance and enriched experience across the system.
  • Typing is much faster and responsive, also the keyboard appears 50% faster.
  • The camera launch time has been reduced to 70% faster than the previous time.

iOS 12 has cool, and legitimately useful new features. Here is a list of the significant features in iOS 12 that will surely impact Mobile App Development world.

Siri is one of the most popular voice assistants. However, Apple added some more values to Siri by introducing the shortcut.

The prime motto behind adding this is to make voice assistant more useful. So that, the user needs to take minimum steps to accomplish the routine task.

Siri shortcuts will monitor user activities and according to the behaviour, it will suggest shortcuts. Siri is going to make suggestions in Siri spotlight or on your lock screen.

As Siri is the personal voice assistant, one also can add unique voice phrases and search queries to Siri. Siri will analyse and predict shortcuts for your apps through donations. iOS App Developers and the users are able to donate shortcuts as a piece of personalization to the device.

This Artificial Intelligence (AI) based voice automation will quickly takeover manual actions. Along with that, the iPhone App Developers need to react quickly to offer their users, the directness and speed.

The Siri shortcuts deliver a faster way to get the things done for any app. It is becoming more versatile day by day as it has the ability to translate phrases in more than 40 language pairs. Now with iOS 12, iPhone Developer need to have a goal-oriented understanding of what are the in-app flows, that drives the most engagement and create Siri shortcuts for them.

Moreover, Siri is powerful enough to handle shortcuts without opening unnecessary apps. This enables iOS Development Companies to provide an optimum user experience using the Siri Shortcuts in the background.

The interfacing will enable a user to interact directly with the particular feature. All in all, Siri is fulfilling a long-term vision with a digital assistant.

iOS 12 offering users a considerable amount of control with the push notifications they receive and the way they receive them. Now users have a complete access to message settings, directly from a push notification interface. Which allows them to opt-out notification from the locked screen.

As mentioned above, Siri is always active in handling, predicting and sending personalised push notifications based on behavioural insights. Users have privileges to group push notification by iOS Mobile App or by theme.

As we have a number of the same apps, such as messaging apps or social media apps. Now the notifications of the same apps can be grouped together. Instant Tuning provides the control over notification settings, right from the lock screen.

The newly introduced Deliver Quietly option sends notification silently to the Notification center without any interruption. Similarly, the high-value and personable notification can justifiably draw your attention, and you will never miss them.

Now in iOS 12, the Notification Content app extensions support interactivity. While iPhone App Development, if you wish to deliver push notification content for the user encouragement, you can add buttons and switches to the push notifications itself.

On top of that, iOS 12 allows iOS Application Developers to customize the complete notification interface. The ability to customize the notifications is only supported in Native iOS App Development and the developers are able to arrange title, subtitle and body as per the requirements.

Also, they can introduce custom branding materials or imaging the push notifications. This way, iOS 12 has also given plenty of opportunities to the iPhone App Development Companies to deliver, attention-grabbing and relevant values.

With iOS 12, the iPhone Developers now have access to password autofill. Not only this feature increases app security because an autofill suggests a strong and unique password, but all it enhances the onboarding processes.

With help of autofill, users can begin using new apps quicker and can have a complete access to the content across the devices without any complications.

If someone is kind of person who is still using ‘6969’ as the pin, which is somehow not far hackable. Here, Apple’s Safari will suggest and help you set a strong password. Not only that, the Siri can help you remember the passwords user have forgotten.

The iOS 12 apps are enabled to an advantage of latest advancements in ARKit. The object detection let nearby objects become a part of Augmented Reality (AR) apps.

There is one way to build compelling AR experiences, and that is to recognize the features of the user’s environment and use them to trigger the appearance of virtual content.

In iOS 12, one can create AR experience by enabling object detection in ARKit. iOS apps provide reference objects, which encodes 3D spatial features of known real-world objects, and ARKit will tell, when and where it detects the corresponding real-world objects during an AR session.

Core ML: a toolkit that helps iPhone Developers to integrate the machine learning models into the iOS Apps (Such as Barcode scanner, face and landmark detection) This time iOS 12 comes with the amazing Core ML 2, which is further simplifying the machine learning integrations, with the help of fewer lines of code.

It supports expensive deep learning possibilities, and with that Core ML 2, the iOS App Developers can run an On-Device machine learning models, which eliminates the need for analyzing the data of multiple servers.

Moreover, Create ML — the new framework added to iOS12. Create ML allows developers to build machine learning algorithms with a little expertise. iOS App Makers can now accomplish some task without the need for separate servers, the OS itself can train the custom data.

If you’ve got any other questions about iOS 12, be sure to leave them in the comments, and I’ll answer them as best I can as I learn more about iOS 12.

new-css-features-in-firefox-68

Firefox 68 landed earlier this month with a bunch of CSS additions and changes. In this blog post we will take a look at some of the things you can expect to find, that might have been missed in earlier announcements.

CSS Scroll Snapping

The headline CSS feature this time round is CSS Scroll Snapping. I won’t spend much time on it here as you can read the blog post for more details. The update in Firefox 68 brings the Firefox implementation in line with Scroll Snap as implemented in Chrome and Safari. In addition, it removes the old properties which were part of the earlier Scroll Snap Points Specification.

The ::marker pseudo-element

The ::marker pseudo-element lets you select the marker box of a list item. This will typically contain the list bullet, or a number. If you have ever used an image as a list bullet, or wrapped the text of a list item in a span in order to have different bullet and text colors, this pseudo-element is for you!

With the marker pseudo-element, you can target the bullet itself. The following code will turn the bullet on unordered lists to hot pink, and make the number on an ordered list item larger and blue.

ul ::marker {
  color: hotpink;
}

ol ::marker {
  color: blue;
  font-size: 200%;
}

An ordered and unordered list with styled bullets

With ::marker we can style our list markers

See the CodePen.

There are only a few CSS properties that may be used on ::marker. These include all font properties. Therefore you can change the font-size or family to be something different to the text. You can also color the bullets as shown above, and insert generated content.

Using ::marker on non-list items

A marker can only be shown on list items, however you can turn any element into a list-item by using display: list-item. In the example below I use ::marker, along with generated content and a CSS counter. This code outputs the step number before each h2 heading in my page, preceded by the word “step”. You can see the full example on CodePen.

h2 {
  display: list-item;
  counter-increment: h2-counter;
}

h2::marker {
  content: "Step: " counter(h2-counter) ". ";
}

If you take a look at the bug for the implementation of ::marker you will discover that it is 16 years old! You might wonder why a browser has 16 year old implementation bugs and feature requests sitting around. To find out more read through the issue, where you can discover that it wasn’t clear originally if the ::marker pseudo-element would make it into the spec.

There were some Mozilla-specific properties that achieved the result developers were looking for with something like ::marker. The properties ::moz-list-bullet and ::moz-list-marker allowed for the styling of bullets and markers respectively, using a moz- vendor prefix.

The ::marker pseudo-element is standardized in CSS Lists Level 3, and CSS Pseudo-elements Level 4, and currently implemented as of Firefox 68, and Safari. Chrome has yet to implement ::marker. However, in most cases you should be able to use ::marker as an enhancement for those browsers which support it. You can allow the markers to fall back to the same color and size as the rest of the list text where it is not available.

CSS Fixes

It makes web developers sad when we run into a feature which is supported but works differently in different browsers. These interoperability issues are often caused by the sheer age of the web platform. In fact, some things were never fully specified in terms of how they should work. Many changes to our CSS specifications are made due to these interoperability issues. Developers depend on the browsers to update their implementations to match the clarified spec.

Most browser releases contain fixes for these issues, making the web platform incrementally better as there are fewer issues for you to run into when working with CSS. The latest Firefox release is no different – we’ve got fixes for the ch unit, and list numbering shipping.

Developer Tools

In addition to changes to the implementation of CSS in Firefox, Firefox 68 brings you some great new additions to Developer Tools to help you work with CSS.

In the Rules Panel, look for the new print styles button. This button allows you to toggle to the print styles for your document, making it easier to test a print stylesheet that you are working on.

The Print Styles button in the UI highlighted

The print styles icon is top right of the Rules Panel.

Staying with the Rules Panel, Firefox 68 shows an icon next to any invalid or unsupported CSS. If you have ever spent a lot of time puzzling over why something isn’t working, only to realise you made a typo in the property name, this will really help!

A property named flagged invalid in the console

In this example I have spelled padding as “pudding”. There is (sadly) no pudding property so it is highlighted as an error.

The console now shows more information about CSS errors and warnings. This includes a nodelist of places the property is used. You will need to click CSS in the filter bar to turn this on.

The console highlighting a CSS error

My pudding error is highlighted in the Console and I can see I used it on the body element.

So that’s my short roundup of the features you can start to use in Firefox 68. Take a look at the Firefox 68 release notes to get a full overview of all the changes and additions that Firefox 68 brings you.

Rachel Andrew is a front and back-end web developer, one half of the company behind Perch CMS, and Editor in Chief of Smashing Magazine. She is a Google Developer Expert for web technologies and a member of the CSS Working Group representing Fronteers, where she is co-editor of the Multi-column Layout spec. Author of 22 books, and a frequent public speaker at conferences worldwide, you can find out what she is up to at https://rachelandrew.co.uk.

More articles by Rachel Andrew…